🚀 Installation

npm i @unizap/uniui

⚡ Usage

Import the UniUI CSS in your main entry file (e.g. app.js):

import '@unizap/uniui/uniui.css'

Now you can use UniUI components anywhere in your app:

import {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@unizap/uniui';

<Button color="amber" variant="filled">
    Hello UniUI
</Button>

🧩 Components

• Accordion
• Alert
• Avatar
• Badge
• Backdrop
• Button
• Card
• Carousel
• Checkbox
• Datepicker
• Dialog
• Divider
• Drawer
• EmptyState
• IconButton
• Input
• List
• OTPInput
• PasswordInput
• Progress
• RadioGroup
• Rating
• Select
• Sheet
• Skeleton
• Slider
• Stepper
• Switch
• Table
• Tabs
• Textarea
• ToggleButton
• ToggleSwitch
• Tooltip
• Typography
• Dropdown
• ActionMenu
• Registration
• DashboardStatistic
• DropzoneUploader
• ProfileShowcase
• Sidebar
• BottomNavigation
• Breadcrumbs
• Snackbar

🎨 Default Colors

UniUI provides a set of default colors you can use out of the box:

• dark
• gray
• light
• pearl
• red
• orange
• amber
• yellow
• lime
• green
• emerald
• teal
• cyan
• sky
• blue
• indigo
• violet
• purple
• fuchsia
• pink
• rose

To use the default color, simply pass its name to the color prop:

<Button color="amber">Amber Button</Button>
<Button color="blue">Blue Button</Button>

🎨 How to Extend Color

To Extend and build sleek interfaces straight from your markup, you can install UniCSS:

npm i @unizap/unicss

You can add custom colors to UniUI's color system using the exported extendColorMap and extendRangeColorMap functions.

Example:

1. Create a file in your project (e.g. brandColor.js):

import { extendColorMap } from '@unizap/uniui'

extendColorMap({
    brand: {
        filled: "bg-color-violet-500 text-color-white",
        outline: "border-color-violet-500 text-color-violet-500",
        transparent: "text-color-violet-500",
        accent: "accent-color-violet-500",
        peer: "peer-checked:border-color-violet-500 peer-checked:text-color-violet-500",
        text: "text-color-violet-500",
    },
})

2. Use your new color in any component:

import './brandColor.js';

<Button color="brand">Brand Button</Button>

3. Run the UniCSS CLI to generate your CSS file:

npx unicss -w -o src/style.css --skip-base

You can also extend Slider colors:

import { extendRangeColorMap } from '@unizap/uniui'

extendRangeColorMap({
    brand: {
        track: 'bg-color-brand-200',
        progress: 'bg-color-brand-500',
        thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',
        thumbHover: 'bg-color-brand-600',
    },
})

📄 License

MIT