open-index/open-npm huggingface dataset:
npm package: @it-tool-ui/accordion
Description: UI Accordion Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.2

# React Accordion UI component

This is a very light UI Accordion component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/accordion)

## Installation

```sh
npm install @it-tool-ui/accordion
```

```js
import { Accordion, AccordionItem } from "@it-tool-ui/accordion";

<Accordion variant="light" selectMode="single">
  <AccordionItem id="1" title="Accordion 1">
    Lorem 1 ...
  </AccordionItem>
  <AccordionItem id="2" title="Accordion 2">
    Lorem 2 ...
  </AccordionItem>
  <AccordionItem id="3" title="Accordion 3">
    Lorem 3 ...
  </AccordionItem>
</Accordion>;
```
npm package: @it-tool-ui/angle-slider
Description: UI AngleSlider Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.3

# React AngleSlider UI component

This is a very light UI AngleSlider component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/angle-slider)

## Installation

```sh
npm install @it-tool-ui/angle-slider
```

```js
import { AngleSlider } from "@it-tool-ui/angle-slider";

<AngleSlider
  value={0}
  max={360}
  showLabel={true}
  labelSize="large"
  barSizePercent={70}
  size="6rem"
  barThick="4px"
/>;
```
npm package: @it-tool-ui/autocomplete
Description: UI Autocomplete Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.3

# React Autocomplete UI component

This is a very light UI Autocomplete component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/autocomplete)

## Installation

```sh
npm install @it-tool-ui/autocomplete
```

```js
import { Autocomplete } from "@it-tool-ui/autocomplete";

<Autocomplete
  placeholder="Input animal"
  disabled={false}
  value={animal}
  onChange={setAnimal}
  options={[
    "Cat",
    "Dog",
    "Zebra",
    "Bird",
    "Snake",
    "Frog",
    "Elephant",
    "Buffalo",
    "Mouse",
    "Tiger",
    "Lion",
  ]}
/>;
```
npm package: @it-tool-ui/avatar
Description: UI Avatar Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.5

# React Avatar UI component

This is a very light UI Avatar component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/avatar)

## Installation

```sh
npm install @it-tool-ui/avatar
```

```js
import { Avatar } from "@it-tool-ui/avatar";

<Avatar
  name="Jane"
  src="https://image.com/photo.jpg"
  size="medium"
  radius="full"
  hideImage={false}
  bordered={false}
  randomFallbackColor={false}
  disabled={false}
/>;
```
npm package: @it-tool-ui/badge
Description: UI Badge Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.2

# React Badge UI component

This is a very light UI Badge component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/badge)

## Installation

```sh
npm install @it-tool-ui/badge
```

```js
import { Badge } from "@it-tool-ui/badge";

<Badge
  title="7"
  shape="square"
  size="medium"
  color="primary"
  showOutline={false}
  hidden={false}
>
  <image src="https://i.pravatar.cc/150?u=a042581f4e29026704d" alt="Jane" />
</Badge>;
```
npm package: @it-tool-ui/breadcrumb
Description: UI Breadcrumb Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.2

# React Breadcrumb UI component

This is a very light UI Breadcrumb component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/breadcrumb)

## Installation

```sh
npm install @it-tool-ui/breadcrumb
```

```js
import { Breadcrumb } from "@it-tool-ui/breadcrumb";

<Breadcrumb
  separator="arrow"
  items={[
    { label: "Home", value: "/home" },
    { label: "Music", value: "/music" },
    { label: "Genre", value: "/genre" },
    { label: "Album", value: "/album" },
    { label: "Song", value: "/song" },
  ]}
  itemsBeforeCollapse={1}
  itemsAfterCollapse={2}
  hasCollapse={true}
  disabled={false}
  onClick={handleClick}
/>;
```
npm package: @it-tool-ui/browser-mockup
Description: UI BrowserMockup Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.3

# React BrowserMockup UI component

This is a very light UI BrowserMockup component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/browser-mockup)

## Installation

```sh
npm install @it-tool-ui/browser-mockup
```

```js
import { BrowserMockup } from "@it-tool-ui/browser-mockup";

<BrowserMockup
  variant="full"
  hasButtonColor={true}
  title="Google!"
  href="https://google.com"
>
  <h1 className="text-red-500">Hello world</h1>
</BrowserMockup>;
```
npm package: @it-tool-ui/button
Description: UI Button Component with React & Typescript with TailwindCSS
Author: Nguyen Dinh Truong
Latest version: 1.0.7

# React Button UI component

This is a very light UI Button component library for ReactJS.
It's using TailwindCSS for styling.

You can also view the demo and get the source code directly for each component without installing this library.

- [Preview and get the code](https://it-tool.app/button)

## Installation

```sh
npm install @it-tool-ui/button
```

```js
import { Button } from "@it-tool-ui/button";

<Button
  buttonColor="primary"
  radius="large"
  size="medium"
  variant="solid"
  disabled={false}
>
  Click me
</Button>;
```
npm package: @it.support/dynamic-modal-component
Description: A reusable dynamic modal component for React apps, built with Material UI and TypeScript.
Author: Your Name
Latest version: 1.0.0

# Dynamic Modal Component

A reusable dynamic modal component for React apps, built with Material UI and TypeScript.

## Features
- Flexible modal content
- Material UI styling
- TypeScript support

## Installation

```sh
npm install @it.support/dynamic-modal-component
```

### Peer Dependencies
- React 18+
- React DOM 18+
- @mui/material 5+

## ⚠️ Material UI Dependency Required

This component uses [Material UI](https://mui.com/) components. **Your project must have `@mui/material` installed as a dependency.**

If you do not install Material UI, your app will crash with errors like:

```
Cannot find module '@mui/material'
```

### Install Material UI in your project:
```sh
npm install @mui/material
```

If your project does not use Material UI and you do not want to add it, this Dynamic Modal component will not work for you.

## Usage

```tsx
import DynamicModal from '@it.support/dynamic-modal-component';

// Example usage here
```

## Props

Document your props and types here.

## License
MIT
npm package: @it.support/filter-panel-component
Description: A reusable filter panel component for React apps, built with Material UI and TypeScript.
Author: Your Name
Latest version: 1.0.0

# Filter Panel Component

A reusable filter panel component for React apps, built with Material UI and TypeScript.

## Features
- Customizable filter fields
- Material UI styling
- TypeScript support

## Installation

```sh
npm install @it.support/filter-panel-component
```

### Peer Dependencies
- React 18+
- React DOM 18+
- React Router DOM 6+
- @mui/material 5+
- @mui/icons-material 5+

## ⚠️ Material UI Dependency Required

This component uses [Material UI](https://mui.com/) components and icons. **Your project must have both `@mui/material` and `@mui/icons-material` installed as dependencies.**

If you do not install Material UI, your app will crash with errors like:

```
Cannot find module '@mui/material'
Cannot find module '@mui/icons-material'
```

### Install Material UI in your project:
```sh
npm install @mui/material @mui/icons-material
```

If your project does not use Material UI and you do not want to add it, this Filter Panel component will not work for you.

## Usage

```tsx
import { FilterPanel } from '@it.support/filter-panel-component';

// Example usage here
```

## Props

Document your props and types here.

## License
MIT
npm package: @it.support/pagination-component
Description: A reusable pagination component for React apps, built with Material UI and TypeScript.
Author: Your Name
Latest version: 1.0.0

# Pagination Component

A reusable pagination component for React apps, built with Material UI and TypeScript.

## Features
- Simple pagination controls
- Material UI styling
- TypeScript support

## Installation

```sh
npm install @it.support/pagination-component
```

### Peer Dependencies
- React 18+
- React DOM 18+
- @mui/material 5+

## ⚠️ Material UI Dependency Required

This component uses [Material UI](https://mui.com/) components. **Your project must have `@mui/material` installed as a dependency.**

If you do not install Material UI, your app will crash with errors like:

```
Cannot find module '@mui/material'
```

### Install Material UI in your project:
```sh
npm install @mui/material
```

If your project does not use Material UI and you do not want to add it, this Pagination component will not work for you.

## Usage

```tsx
import Pagination from '@it.support/pagination-component';
import React, { useState } from 'react';

const Example = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalRows = 100;
  const rowsPerPage = 10;

  return (
    <Pagination
      totalRows={totalRows}
      rowsPerPage={rowsPerPage}
      currentPage={currentPage}
      handlePageChange={setCurrentPage}
    />
  );
};
```

## Props

| Prop             | Type                | Required | Description                        |
|------------------|---------------------|----------|------------------------------------|
| `totalRows`      | `number`            | Yes      | Total number of rows/items         |
| `rowsPerPage`    | `number`            | Yes      | Number of rows/items per page      |
| `currentPage`    | `number`            | Yes      | Current page number (1-based)      |
| `handlePageChange` | `(page: number) => void` | Yes | Callback when page changes         |

## License
MIT
npm package: @it.support/sidebar-component
Description: A responsive sidebar component with collapsible functionality
Author: Your Name
Latest version: 1.0.0

# Sidebar Component

A responsive sidebar component with collapsible functionality built with React and Material-UI.

## Features

- Responsive design that adapts to mobile and desktop
- Collapsible sidebar with smooth animations
- Customizable navigation links with icons
- Optional logo and organization name display
- Built with TypeScript for better type safety

## Installation

```bash
npm install @my-app/sidebar-component
```

## Dependencies

This component requires the following peer dependencies:
- React 18+
- React DOM 18+
- React Router DOM 6+
- Material-UI 5+
- Material-UI Icons 5+

## ⚠️ Material UI Dependency Required

This component uses [Material UI](https://mui.com/) components and icons. **Your project must have both `@mui/material` and `@mui/icons-material` installed as dependencies.**

If you do not install Material UI, your app will crash with errors like:

```
Cannot find module '@mui/material'
Cannot find module '@mui/icons-material'
```

### Install Material UI in your project:
```sh
npm install @mui/material @mui/icons-material
```

If your project does not use Material UI and you do not want to add it, this Sidebar component will not work for you.

## Usage

```tsx
import React from 'react';
import { Sidebar } from '@my-app/sidebar-component';
import DashboardIcon from '@mui/icons-material/Dashboard';
import SettingsIcon from '@mui/icons-material/Settings';

const App = () => {
  const links = [
    {
      label: 'Dashboard',
      link: '/dashboard',
      icon: DashboardIcon
    },
    {
      label: 'Settings',
      link: '/settings',
      icon: SettingsIcon
    }
  ];

  return (
    <Sidebar 
      links={links}
      logo="/path/to/logo.png"
      orgName="My Organization"
    />
  );
};
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `links` | `SidebarLink[]` | Yes | Array of navigation links |
| `logo` | `string` | No | URL to the logo image |
| `orgName` | `string` | No | Organization name to display at bottom |

### SidebarLink Interface

```tsx
interface SidebarLink {
  label: string;        // Display text for the link
  link: string;         // Route path
  icon: React.ComponentType<any>; // Material-UI icon component
}
```

## Styling

The component uses Tailwind CSS classes for styling. Make sure your project has Tailwind CSS configured.

## License

MIT
npm package: @it.support/status-modal-component
Description: A reusable status modal component for React apps, built with Material UI and TypeScript.
Author: Your Name
Latest version: 1.0.0

# Status Modal Component

A reusable status modal component for React apps, built with Material UI and TypeScript.

## Features
- Status display modal
- Material UI styling
- TypeScript support

## Installation

```sh
npm install @it.support/status-modal-component
```

### Peer Dependencies
- React 18+
- React DOM 18+
- @mui/material 5+

## ⚠️ Material UI Dependency Required

This component uses [Material UI](https://mui.com/) components. **Your project must have `@mui/material` installed as a dependency.**

If you do not install Material UI, your app will crash with errors like:

```
Cannot find module '@mui/material'
```

### Install Material UI in your project:
```sh
npm install @mui/material
```

If your project does not use Material UI and you do not want to add it, this Status Modal component will not work for you.

## Usage

```tsx
import StatusModal from '@it.support/status-modal-component';

// Example usage here
```

## Props

Document your props and types here.

## License
MIT