![\"UniUI](\"https://ik.imagekit.io/unizap/uniui.svg\")
\n\n \n
\n UniUI is a comprehensive and highly customizable UI component library built for React. Inspired by modern design principles, UniUI offers a wide range of high-quality, flexible, and easy-to-use components to build elegant and functional user interfaces for web applications.\n
\n\n---\n\n## 🚀 Installation\n\n```sh\nnpm i @unizap/uniui\n```\n\n---\n\n## ⚡ Usage\n\nImport the UniUI CSS in your main entry file (e.g. `app.js`):\n\n```js\nimport '@unizap/uniui/uniui.css'\n```\n\nNow you can use UniUI components anywhere in your app:\n\n```jsx\nimport {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@unizap/uniui';\n\n\n```\n\n---\n\n## 🧩 Components\n\n- **Accordion**\n- **Alert**\n- **Avatar**\n- **Badge**\n- **Backdrop**\n- **Button**\n- **Card**\n- **Carousel**\n- **Checkbox**\n- **Datepicker**\n- **Dialog**\n- **Divider**\n- **Drawer**\n- **EmptyState**\n- **IconButton**\n- **Input**\n- **List**\n- **OTPInput**\n- **PasswordInput**\n- **Progress**\n- **RadioGroup**\n- **Rating**\n- **Select**\n- **Sheet**\n- **Skeleton**\n- **Slider**\n- **Stepper**\n- **Switch**\n- **Table**\n- **Tabs**\n- **Textarea**\n- **ToggleButton**\n- **ToggleSwitch**\n- **Tooltip**\n- **Typography**\n- **Dropdown**\n- **ActionMenu**\n- **Registration**\n- **DashboardStatistic**\n- **DropzoneUploader**\n- **ProfileShowcase**\n- **Sidebar**\n- **BottomNavigation**\n- **Breadcrumbs**\n- **Snackbar**\n\n\n## 🎨 Default Colors\n\nUniUI provides a set of default colors you can use out of the box:\n\n- **dark**\n- **gray**\n- **light**\n- **pearl**\n- **red**\n- **orange**\n- **amber**\n- **yellow**\n- **lime**\n- **green**\n- **emerald**\n- **teal**\n- **cyan**\n- **sky**\n- **blue**\n- **indigo**\n- **violet**\n- **purple**\n- **fuchsia**\n- **pink**\n- **rose**\n\nTo use the default color, simply pass its name to the `color` prop:\n\n```tsx\n\n\n```\n\n## 🎨 How to Extend Color\n\nTo Extend and build sleek interfaces straight from your markup, you can install **UniCSS**: \n[](https://www.npmjs.com/package/@unizap/unicss)\n\n```sh\nnpm i @unizap/unicss\n```\n\nYou can add custom colors to UniUI's color system using the exported `extendColorMap` and `extendRangeColorMap` functions.\n\n**Example:**\n\n1. Create a file in your project (e.g. `brandColor.js`):\n\n```js\nimport { extendColorMap } from '@unizap/uniui'\n\nextendColorMap({\n brand: {\n filled: \"bg-color-violet-500 text-color-white\",\n outline: \"border-color-violet-500 text-color-violet-500\",\n transparent: \"text-color-violet-500\",\n accent: \"accent-color-violet-500\",\n peer: \"peer-checked:border-color-violet-500 peer-checked:text-color-violet-500\",\n text: \"text-color-violet-500\",\n },\n})\n```\n\n2. Use your new color in any component:\n\n```jsx\nimport './brandColor.js';\n\n\n```\n\n3. Run the UniCSS CLI to generate your CSS file:\n\n```sh\nnpx unicss -w -o src/style.css --skip-base\n```\n\n---\n\nYou can also extend Slider colors:\n\n```js\nimport { extendRangeColorMap } from '@unizap/uniui'\n\nextendRangeColorMap({\n brand: {\n track: 'bg-color-brand-200',\n progress: 'bg-color-brand-500',\n thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',\n thumbHover: 'bg-color-brand-600',\n },\n})\n```\n\n---\n\n## 📄 License\n\nMIT\n","readmeFilename":"README.md"}