UI Kit Installation

Step 1 - Install package

npm i @kiyotakkkka/zvs-uikit-lib

Step 2 - Configure Tailwind scanning

Tailwind 4 does not scan node_modules by default. Add this line to the CSS file where you import Tailwind (@import "tailwindcss"):

@source "../node_modules/@kiyotakkkka/zvs-uikit-lib/dist/**/*.{js,cjs,mjs,ts,tsx,jsx}";

Add the package path to content in tailwind.config.js:

module.exports = {
    content: [
        "../node_modules/@kiyotakkkka/zvs-uikit-lib/dist/**/*.{js,cjs,mjs,ts,tsx,jsx}",
        // other paths...
    ],
    // other config...
};

Step 3 - Color palette

For correct component rendering, use this palette (or override the same tokens):

@theme {
    --color-main-50: rgb(250 250 250);
    --color-main-100: rgb(245 245 245);
    --color-main-200: rgb(229 229 229);
    --color-main-300: rgb(212 212 212);
    --color-main-400: rgb(163 163 163);
    --color-main-500: rgb(115 115 115);
    --color-main-600: rgb(82 82 82);
    --color-main-700: rgb(64 64 64);
    --color-main-800: rgb(38 38 38);
    --color-main-900: rgb(23 23 23);
}

Component Catalog & API

Navigation

• Components
• Hooks
• Providers

Components (@kiyotakkkka/zvs-uikit-lib/ui)

Components: Input & Form Controls

| Component | Purpose | Documentation | | ------------------ | ------------------------------------------------------------------------ | ------------------------------------------------------- | | Button | Base button with variants and shape options. | Button | | InputSmall | Single-line input with password visibility toggle for type="password". | InputSmall | | InputDate | Date input with calendar popup. | InputDate | | InputBig | Multiline text input. | InputBig | | InputCheckbox | true/false switch control. | InputCheckbox | | Select | Single-value select control. | Select | | Dropdown | Generic dropdown menu. | Dropdown | | AutoFillSelector | Multi-select with search/autocomplete. | AutoFillSelector | | Calendar | Date calendar with constraints and custom day rendering. | Calendar | | Switcher | Segmented switch between options. | Switcher |

Components: Overlays & Floating UI

| Component | Purpose | Documentation | | ------------- | -------------------------------------------------- | --------------------------------------------- | | Modal | Modal dialog window. | Modal | | SlidedPanel | Slide-in side panel (drawer). | SlidedPanel | | Floating | Hover/focus floating panel attached to an element. | Floating |

Components: Structure & Composition

| Component | Purpose | Documentation | | ------------ | ---------------------------------------------------- | ------------------------------------------- | | Card | Container with optional header/body/footer sections. | Card | | Accordeon | Expandable section with animated height. | Accordeon | | TreeView | Hierarchical list with optional virtualization. | TreeView | | Table | Typed table with compound parts and sorting modes. | Table | | Separator | Horizontal/vertical separator. | Separator | | ScrollArea | Styled scroll container. | ScrollArea | | PrettyBR | Decorative horizontal divider with icon and label. | PrettyBR |

Components: Status & Feedback

| Component | Purpose | Documentation | | --------- | ------------------------- | ----------------------------------- | | Badge | Compact status indicator. | Badge | | Alert | Alert/notification block. | Alert | | Loader | Loading spinner. | Loader |

Hooks (@kiyotakkkka/zvs-uikit-lib/hooks)

| Hook | Purpose | Documentation | Returns | | ----------- | ------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------------------- | | useToasts | Access toast context API. Works only inside ToastProvider. | useToasts | ToastContextValue with: push, normal, info, warning, success, danger. |

Providers (@kiyotakkkka/zvs-uikit-lib/providers)

| Provider | Purpose | | --------------- | --------------------------------- | | ToastProvider | Global toast notifications stack. |