open-index/open-npm huggingface dataset:
npm package: @licuido-ui/react
Description: This Package having all components.
Latest version: 1.0.1

# All Components

This Package having all components.

## Installation

```sh
npm i @licuido-ui/react
```

## Import component

```jsx
import { Button, InputField } from '@licuido-ui/react';
```

## Usage

```jsx
<Button>button</Button>
```

```jsx
<InputField onChange={console.log} />
```

## Components List

1. Table
2. Layout
3. Login
4. Signup
5. Profile
6. Button Group
7. Rating
8. Stepper
9. Stepper Mobile
10. Linear Progress
11. Circle Progress
12. Slider
13. Range Slider
14. Date Picker
15. Date Range Picker
16. Error Page
17. Timeline
18. Empty Page
19. Bottom Tab
20. Sidebar
21. Header
22. Footer
23. Filter
24. Calendar
25. Search
26. Select
27. Tree View
28. Text Area
29. Chat Box
30. Fab Button
31. Role Management
32. Pricing
33. Billing And Payment
34. Compare the Feature
35. Media card
36. Coach Mark
37. Render Form
38. Basic Button
39. Date and Time Picker
40. Switch
41. Dropdown
42. Mobile Input
43. Select Chip
44. Checkbox
45. Nested Menu
46. Label
47. Map
48. Input Field
49. Kanban View (Drag and Drop)
npm package: @licuido-ui/ui_circle-progress
Description: CircleProgress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
Latest version: 0.0.2

# CircleProgress

CircleProgress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link CircleProgress](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_circle-progress
```

## Import component

```jsx
import { CircleProgress } from '@licuido-ui/ui_circle-progress';
```

## Usage

```jsx
<CircleProgress value={20} thumbColor={'green'} thumbSecondaryColor={'lightgreen'} size={10} />
```

## Image

![alt text](./circleProgress.png)

## Sample Code

```jsx
<CircleProgress
  value={20}
  size={100}
  labelStyle={{ backgroundColor: '' }}
  symbols={'%'}
  thickness={5}
  labelColor={'#f00'}
  labelSize={16}
  thumbColor={'#ff0'}
  thumbSecondaryColor={'#ff0f'}
  labelBackgroundStyle={{}}
/>
```

## Props

| **Name**                 | Description          | Default         | Control                                                  |
| ------------------------ | -------------------- | --------------- | -------------------------------------------------------- |
| **circleId**             | string               | string          | string                                                   |
| **value**                | number               | 20              | 20                                                       |
| **labelStyle**           | object               | { }             | labelStyle : {}                                          |
| **symbols**              | char "%","$"         | "%"             | "%"                                                      |
| **thickness**            | number               | 4               | 4                                                        |
| **size**                 | number               | 50              | 50                                                       |
| **labelSize**            | number               | 10              | 10                                                       |
| **thumbColor**           | string               | "blue"          | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); |
| **thumbSecondaryColor**  | string               | "lightblue"     | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); |
| **labelBackgroundStyle** | object               | { }             | labelBackgroundStyle : {}                                |
| **className**            | string               | circle-progress | Set string                                               |
| **sx**                   | SxProps&lt;Theme&gt; | {}              | Set object                                               |
| **labelColor**           | string               | "green"         | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); |
npm package: @licuido-ui/ui_dashboard-stats
Description: The `DashboardStats` component is a React component for displaying dashboard statistics in a visually appealing way.
Latest version: 3.0.2

# DashboardStats Component

The `DashboardStats` component is a React component for displaying dashboard statistics in a visually appealing way.

### Author

- @author Narayanamoorthi <narayana@crayond.co>

## Link

[Story Book Link DialogBox](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm install @licuido-ui/ui_dashboard-stats
```

## Import component

```jsx
import { DashboardStats } from '@licuido-ui/ui_dashboard-stats';
```

## Usage

```jsx
<DialogBox dashBoardData={dashboardData} />
```

## Image

![alt text](./sample.jpg)

## Sample Code

```jsx
 <DashboardStats
  name={'Employee count'}
  count={'245'}
  IconbgColor={'#e7f4f8'}
  Icon={<EmployeeIcon />} />
/>
```

## Props

| **Prop**        | **Type**                       | **Description**                                                                                      |
| --------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------- |
| `className`     | string                         | Additional class name for styling.                                                                   |
| `sx`            | SxProps<Theme>                 | Custom styling using Material-UI's SxProps.                                                          |
| `dashBoardData` | DashBoardData[]                | Array of DashBoardData items to be displayed on the dashboard.                                       |
| `count`         | React.ReactNode,string, number | I can add a any thing in count props because they have a dataTypes of number , string and react node |
| `nameStyle`     | SxProps                        | Styling for the name of the data item.                                                               |
| `cardStyle`     | SxProps                        | Styling for the individual dashboard card.                                                           |
| `countStyle`    | SxProps                        | Styling for the count associated with the data item.                                                 |
npm package: @licuido-ui/ui_date-time-picker
Description: Created a React component, Render F`or`m that reder group of input fields with validations
Latest version: 0.0.7

# DateAndTimePicker

Created a React component, Render F`or`m that reder group of input fields with validations

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link DateAndTimePicker](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_date-time-picker
```

## Import component

```jsx
import { DateAndTimePicker } from '@licuido-ui/ui_date-time-picker';
```

## Usage

```jsx
<DateAndTimePicker label={'My Label'} type={'date'} />
```

## Image

![alt text](./dateTimePricker.png)

## Sample Code

```jsx
<DateAndTimePicker 
    id={''} 
    label={'My Label'} 
    type={'date'} 
    labelVariant={'standard'} 
    value={new Date()} 
/>
```

## Props

| **Name**         | **Description**                                                                                                                     | **Default** | **Control**                   |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------- |
| **id**           | string                                                                                                                              | string      | string                        |
| **label**        | Label                                                                                                                               | \-          | My Label                      |
| **labelVariant** | 'standard' `or` 'floating'                                                                                                          | \-          | standard                      |
| **type**         | 'heading' `or` 'input' `or` 'dateAndTime' `or` 'date' `or` 'dropDown' `or` 'mobileNumberInput' `or` 'custom' `or` 'chipSelect' `or` | \-          | date                          |
| **value**        |                                                                                                                                     | \-          | "2023\-08\-07T08:01:45\.461Z" |
npm package: @licuido-ui/ui_label
Description: The Label component is a customizable label element designed to display text or a React element with a colored background. It provides options to set the text color, background color, and a click event handler for interactivity.
Latest version: 0.0.2

# Label

The Label component is a customizable label element designed to display text or a React element with a colored background. It provides options to set the text color, background color, and a click event handler for interactivity.


### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link ButtonGroup](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_label
```

## Import component

```jsx
import { Label } from '@licuido-ui/ui_label';
```
## Usage

```jsx
<Label  color={'#fff'}  />
```

## Image

![alt text](./label.png)
## Sample code

```jsx
<Label 
  id={'label'}
  color='#fff' 
  bgColor='#007bff' 
  label='Click Me' 
  onClickFun={() => console.log('Label clicked')} 
/>
```

## Props

| Name           | Type                   | Default Value | Description                                                 |
| -------------- | ---------------------- | ------------- | ----------------------------------------------------------- |
| **id**         | string                 | string        | string                                                      |
| **className**  | string                 | `''`          | Additional CSS class for styling the label component.       |
| **sx**         | SxProps<Theme>         | `{}`          | Custom style prop for using MUI's sx prop.                  |
| **color**      | string                 | `'#e2eafa'`   | Color of the label text.                                    |
| **bgColor**    | string                 | `'#7692cc'`   | Background color of the label.                              |
| **label**      | string \| ReactElement | `''`          | The text or React element to be displayed within the label. |
| **onClickFun** | () => void             | `() => false` | Event handler for when the label is clicked.                |
npm package: @licuido-ui/ui_layout
Description: Layout components are components in React whose primary concern is helping us to arrange other components that we create on the page.
Latest version: 0.0.4

# Layout

Layout components are components in React whose primary concern is helping us to arrange other components that we create on the page.

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link Layout](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_layout
```

## Import component

```jsx
import { Layout } from '@licuido-ui/ui_layout';
```

## Usage

```jsx
<Layout headerComponent={<Header />} bodyComponent={<BodyContent />} footerComponent={<Footer />} />
```

## Image

![alt text](./layout.png)

## Sample Code

```jsx
<Layout 
   headerComponent={<Header />} 
   bodyComponent={<BodyContent />} 
   footerComponent={<Footer />} 
/>
```

## Props

| **Name**            | **Description**      | **Default**       | **Control**           |
| ------------------- | -------------------- | ----------------- | --------------------- |
| **id**              | string               | string            | string                |
| **containerStyle**  | SxProps&lt;\{\}&gt;  | \{ \}             | containerStyle : \{\} |
| **headerStyle**     | SxProps&lt;\{\}&gt;  | \{ \}             | headerStyle : \{\}    |
| **bodyStyle**       | SxProps&lt;\{\}&gt;  | \{ \}             | bodyStyle : \{\}      |
| **footerStyle**     | SxProps&lt;\{\}&gt;  | \{ \}             | footerStyle : \{\}    |
| **headerComponent** | ReactNode            | &lt;&gt;&lt;/&gt; | ReactNode             |
| **bodyComponent**   | ReactNode            | &lt;&gt;&lt;/&gt; | ReactNode             |
| **footerComponent** | ReactNode            | &lt;&gt;&lt;/&gt; | ReactNode             |
| **className**       | string               | \-                | Set string            |
| **sx**              | SxProps&lt;Theme&gt; | \-                | Set object            |
npm package: @licuido-ui/ui_otp-simple
Description: The OTP component allows you to create a one-time password input field for authentication purposes.
Latest version: 1.0.0

# OTP

The OTP component allows you to create a one-time password input field for authentication purposes.

### Author

- @author NArayanamoorthi E <narayana@crayond.co>

## Link

[Story Book Link ErrorPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_otp-simple
```

## Import component

```jsx
import { Otpsimple } from '@licuido-ui/ui_otp-simple';
```

## Usage

```jsx
<Otpsimple numInputs={4} {...args} />
```

## Image

![OTP img](./otp.jpg)

## Props

| **Prop** | **Type** | **Default Value** | **Description** |
| Prop            | Type     | Default Value          | Description          |
| --------------- | -------- | ---------------------- | -------------------- |
| id              | -        | -                      | Identifier           |
| className       | -        | -                      | CSS class name       |
| numInputs       | number   | 4                      | Number of inputs     |
| shouldAutoFocus | boolean  | false                  | Auto-focus flag      |
| inputType       | string   | 'text'                 | Type of input        |
| renderSeparator | function | null                   | Separator rendering  |
| placeholder     | string   | ''                     | Placeholder text     |
| containerStyle  | object   | {}                     | Styles for container |
| inputStyle      | object   | {}                     | Styles for input     |
| errorMsg        | string   | ''                     | Error message        |
| errorStyle      | object   | {}                     | Styles for error     |
| rootStyle       | object   | {}                     | Root styles          |
| onChangeFn      | funtion  | -                      | onchange value       |
| isHyphen        | boolean  | otp center hyphen call | false                |
npm package: @licuido-ui/ui_profile-avatar
Description: The `ProfileAvatar` component provides a customizable avatar with an overlaying badge containing an icon. It can be used to display profile images along with status or notification icons.
Latest version: 0.0.1

# ProfileAvatar

The `ProfileAvatar` component provides a customizable avatar with an overlaying badge containing an icon. It can be used to display profile images along with status or notification icons.

## Installation

```sh
npm i @licuido-ui/ui_profile-avatar
```

### Author

- @author Akila K <akila@crayond.co>

## Link

[Story Book Link EmptyPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Import component

```jsx
import { ProfileAvatar } from '@licuido-ui/ui_profile-avatar';
```

## Usage

```jsx
import { ProfileAvatar } from '@licuido-ui/ui_profile-avatar';
import { Icon } from '@mui/material';

const MyComponent = () => {
  return (
    <ProfileAvatar
      imgSrc='avatar.jpg'
      variant='circular'
      icon={<Icon>notifications</Icon>}
      iconStyle={{ color: 'white' }}
    />
  );
};
```

## Image

![alt text](./profileAvatar.png)

### Props

| Prop        | Type         | Default       | Description                                         |
| ----------- | ------------ | ------------- | --------------------------------------------------- |
| className   | string       | ''            | Additional class name for custom styling            |
| sx          | SxProps      | {}            | Custom styles using MUI's `sx` prop system          |
| avatarStyle | SxProps      | {}            | Custom styles for the Avatar component              |
| variant     | string       | 'rounded'     | Avatar variant ('rounded', 'square', or 'circular') |
| imgSrc      | string       | ''            | Image source URL for the Avatar component           |
| onClick     | () => void   | () => {}      | Click event handler for the Avatar component        |
| icon        | ReactElement | `<></>`       | Icon for the Avatar component                       |
| iconStyle   | SxProps      | {}            | Custom styles for the icon                          |
| badgeStyle  | SxProps      | {}            | Custom styles for the badge container               |
| deleteIcon  | ReactElement | _Custom Icon_ | Icon for deleting the uploaded image                |
npm package: @licuido-ui/ui_responsive-stepper
Description: The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where seque
Author: vasanthRaj
Latest version: 0.0.1

# Stepper

The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

### Author

- @author Vasanth Raj <vasantharaja@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_responsive-stepper
```

## Import component

```jsx
import { Stepper } from '@licuido-ui/ui_responsive-stepper';
```

## Usage

```jsx
  <ResponsiveStepper
        variant='vertical'
        steps={steps}
        icons={icons}
        activeStep={activeStep}
        labelPositionStyle={{ top: 19 }}
      /> />
```

## Image

![alt text](./stepper.png)

## Sample Code

```jsx
<ResponsiveStepper
  variant='vertical'
  steps={steps}
  icons={icons}
  activeStep={activeStep}
  labelPositionStyle={{ top: 19 }}
/>
```

## Props

| Name                   | Description    | Default | Control      |
| ---------------------- | -------------- | ------- | ------------ |
| variant                | string         | string  | string       |
| steps                  | StepData[]     | []      | string[]     |
| icons                  | ReactElement   | { }     | ReactElement |
| activeStep             | number         | []      | number       |
| activeLineStyle        | SxProps        | 0       | SxProps      |
| className              | string         | -       | string       |
| sx                     | SxProps<Theme> | -       | SxProps      |
| completedLineStyle     | SxProps        | -       | SxProps      |
| lineStyle              | SxProps        | -       | SxProps      |
| labelStyle             | SxProps        | -       | SxProps      |
| stepIconStyle          | SxProps        | -       | SxProps      |
| activeStepIconStyle    | SxProps        | -       | SxProps      |
| completedStepIconStyle | SxProps        | -       | SxProps      |
| connectorOverAllStyle  | SxProps        | -       | SxProps      |
npm package: @licuido-ui/ui_vertical-stepper-tab
Description: The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where seque
Author: vasanthRaj
Latest version: 0.0.1

# Stepper

The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

### Author

- @author VasanthRaj <vasantharaja@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_vertical-stepper-tab
```

## Import component

```jsx
import { Stepper } from '@licuido-ui/ui_vertical-stepper-tab';
```

## Usage

```jsx
<VerticalStepperTab
  steps={steps}
  activeStep={activeStep}
  icon={<ClickIcon />}
  indicatorHeight={'10px'}
  indicatorWidth={'10px'}
  stepIconHeight={'40px'}
/>
```

## Image

![alt text](./verticalStepper.png)

## Sample Code

```jsx
<VerticalStepperTab
  steps={steps}
  activeStep={activeStep}
  icon={<ClickIcon />}
  indicatorHeight={'10px'}
  indicatorWidth={'10px'}
  stepIconHeight={'40px'}
/>
```

## Props

| Name            | Description    | Default | Control      |
| --------------- | -------------- | ------- | ------------ |
|                 |                | string  |              |
| steps           | StepData[]     | []      | string[]     |
| icon            | Reactelement   | { }     | Reactelement |
| indicatorStyle  | SxProps        | -       | SxProps      |
| activeStep      | number         | 0       | number       |
| labelStyle      | SxProps        | -       | SxProps      |
| sx              | SxProps<Theme> | -       | SxProps      |
| stepIconStyle   | SxProps        | -       | SxProps      |
| indicatorHeight | an             | 0       | number       |
| indicatorWidth  | any            | 0       | number       |
| stepIconHeight  | any            | 0       | number       |
npm package: @licuido-ui/ui_vertical-tabs
Description: The tab component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequentia
Author: vasanthRaj
Latest version: 0.0.1

# tab

The tab component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

### Author

- @author VasanthRaj <vasantharaja@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_vertical-tabs
```

## Import component

```jsx
import { Stepper } from '@licuido-ui/ui_vertical-tabs';
```

## Usage

```jsx
<VerticalTabs tabList={tabListData} value={value} handleChange={handleChange} />{' '}
      <Box>
          <TabPanel key={index} value={value} index={index}>
            {val}
          </TabPanel>
      </Box>
```

## Image

![alt text](./stepperTab.png)

## Sample Code

```jsx
<VerticalTabs tabList={tabListData} value={value} handleChange={handleChange} />{' '}
      <Box>
          <TabPanel key={index} value={value} index={index}>
            {val}
          </TabPanel>
      </Box>
```

## Props

| Name              | Description    | Default | Control  |
| ----------------- | -------------- | ------- | -------- |
| className         | string         | -       | -        |
| tabList           | StepData[]     | []      | string[] |
| sx                | SxProps        | { }     | SxProps  |
| value             | number         | 0       | number   |
| tabStyle          | SxProps        | -       | SxProps  |
| tabContainerStyle | SxProps        | -       | SxProps  |
| indicatorStyle    | SxProps<Theme> | -       | SxProps  |
npm package: @licuihong/lowcode-material
Description: @licuihong/lowcode-material
Author: fusion-team
Latest version: 0.1.22

# lowcode-material

一个面向 PC 的业务组件库

## 调试
启动调试

```
npm run lowcode:dev             # 打开开发环境，运行所有组件
```

构建

```
npm run lowcode:build
```
npm package: @licuihong/lowcode-setters
Description: @licuihong/lowcode-setters
Author: lch
Latest version: 1.0.0

# LowcodeSetters [![][npm-image]][npm-url]

lowcode-setters

---

## 标准组件描述协议中使用

```js
 configure: {
   props: [
     {
        type: 'field',
        name: 'someprop',
        title: '某属性',
        setter: 'LowcodeSetters'
     }
   ]
 }
```

[npm-image]: https://img.shields.io/badge/lowcode-setters
[npm-url]: https://www.npmjs.com/package/lowcode-setters