my-ui-kit123

A modern, beautiful UI component library for React applications built with TypeScript.

Features

✨ Modern Design - Beautiful gradients, smooth animations, and contemporary styling
🎨 10 Components - Essential UI components for any React application
📦 TypeScript Support - Full type definitions included
🎯 Easy to Use - Simple API with sensible defaults
⚡ Lightweight - Minimal bundle size with tree-shaking support
🔧 Customizable - Flexible props for customization

Installation

npm install my-ui-kit123

Quick Start

import { Button, Card, Input } from 'my-ui-kit123';

function App() {
  return (
    <Card title="Welcome">
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Disable the button | | onClick | (event: MouseEvent) => void | - | Click handler | | children | ReactNode | - | Button content |

Example:

import { Button } from 'my-ui-kit123';

<Button variant="primary" size="large" onClick={() => alert('Clicked!')}>
  Click Me
</Button>

ButtonGroup

Groups multiple buttons together with seamless styling.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | orientation | 'horizontal' \| 'vertical' | 'horizontal' | Group orientation | | children | ReactNode | - | Button components |

Example:

import { ButtonGroup, Button } from 'my-ui-kit123';

<ButtonGroup orientation="horizontal">
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</ButtonGroup>

Input

A styled text input component with error state support.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'text' \| 'password' \| 'email' \| 'number' | 'text' | Input type | | value | string | '' | Input value | | onChange | (value: string) => void | - | Change handler | | placeholder | string | - | Placeholder text | | disabled | boolean | false | Disable the input | | error | string | - | Error message to display |

Example:

import { Input } from 'my-ui-kit123';

const [value, setValue] = useState('');

<Input 
  placeholder="Enter email" 
  value={value}
  onChange={setValue}
  error={!value.includes('@') ? 'Invalid email' : undefined}
/>

Checkbox

A custom-styled checkbox component.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean | false | Checked state | | onChange | (checked: boolean) => void | - | Change handler | | label | string | - | Label text | | disabled | boolean | false | Disable the checkbox |

Example:

import { Checkbox } from 'my-ui-kit123';

const [checked, setChecked] = useState(false);

<Checkbox 
  label="Accept terms and conditions" 
  checked={checked}
  onChange={setChecked}
/>

Select

A dropdown select component.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | options | SelectOption[] | [] | Array of options | | value | string | '' | Selected value | | onChange | (value: string) => void | - | Change handler | | placeholder | string | 'Select an option' | Placeholder text | | disabled | boolean | false | Disable the select |

Example:

import { Select } from 'my-ui-kit123';

const [value, setValue] = useState('');

<Select
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' }
  ]}
  value={value}
  onChange={setValue}
  placeholder="Choose a framework"
/>

ToggleButton

A modern toggle switch component.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean | false | Toggle state | | onChange | (checked: boolean) => void | - | Change handler | | label | string | - | Label text | | disabled | boolean | false | Disable the toggle |

Example:

import { ToggleButton } from 'my-ui-kit123';

const [enabled, setEnabled] = useState(false);

<ToggleButton 
  label="Enable notifications" 
  checked={enabled}
  onChange={setEnabled}
/>

Rating

An interactive star rating component.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | value | number | 0 | Current rating | | max | number | 5 | Maximum rating | | onChange | (value: number) => void | - | Change handler | | disabled | boolean | false | Disable interaction | | size | 'small' \| 'medium' \| 'large' | 'medium' | Star size |

Example:

import { Rating } from 'my-ui-kit123';

const [rating, setRating] = useState(3);

<Rating value={rating} onChange={setRating} max={5} size="large" />

Chip

A compact element for displaying tags or categories.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | '' | Chip text | | onDelete | () => void | - | Delete handler (shows X button) | | variant | 'default' \| 'primary' \| 'secondary' | 'default' | Chip style | | size | 'small' \| 'medium' \| 'large' | 'medium' | Chip size |

Example:

import { Chip } from 'my-ui-kit123';

<Chip 
  label="React" 
  variant="primary" 
  onDelete={() => console.log('Deleted')}
/>

Dialog

A modal dialog component with overlay.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | false | Dialog visibility | | onClose | () => void | - | Close handler | | title | string | - | Dialog title | | children | ReactNode | - | Dialog content |

Example:

import { Dialog, Button } from 'my-ui-kit123';

const [open, setOpen] = useState(false);

<>
  <Button onClick={() => setOpen(true)}>Open Dialog</Button>
  <Dialog open={open} onClose={() => setOpen(false)} title="Confirm Action">
    <p>Are you sure you want to continue?</p>
    <Button onClick={() => setOpen(false)}>Confirm</Button>
  </Dialog>
</>

Card

A container component with various styling options.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Card title | | children | ReactNode | - | Card content | | variant | 'default' \| 'elevated' \| 'outlined' | 'default' | Card style | | padding | 'small' \| 'medium' \| 'large' | 'medium' | Card padding |

Example:

import { Card } from 'my-ui-kit123';

<Card title="User Profile" variant="elevated" padding="large">
  <p>Name: John Doe</p>
  <p>Email: [email protected]</p>
</Card>

Running Examples

To see all components in action:

cd examples
npm install
npm start

The examples app will open at http://localhost:8080 showcasing all components with various configurations.

TypeScript Support

This library is written in TypeScript and includes type definitions. All component props are fully typed:

import { ButtonProps, CardProps } from 'my-ui-kit123';

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'large',
  onClick: () => console.log('Clicked')
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.