# Quinkit UI — Full LLM Reference

## Product

Quinkit UI is a React UI component library for polished free-core components and future domain-specific kits. The public package is @quinkit/ui@0.1.9.

## Install

```bash
pnpm add @quinkit/ui
```

## Global styles

```tsx
import "@quinkit/ui/styles";
```

## Themes

Use `data-theme` on the root element and `dark` for dark mode. Core themes include dashboard, ecommerce, healthcare, fintech, and edtech, with additional sub-themes and 64 palettes.

## Registry

Local registry files are generated in `docs/registry` and static hosting-ready files are generated in `public/r`. Target public registry URL: https://quinkit-ui.vercel.app/r/index.json.

## Atoms

### Avatar

- Slug: `avatar`
- Source: `packages/ui/src/components/atoms/avatar/avatar.tsx`
- Registry item: `/r/avatar.json`
- Description: Accessible avatar primitive with image and fallback support.
- Import: `import { Avatar } from "@quinkit/ui";`

### Badge

- Slug: `badge`
- Source: `packages/ui/src/components/atoms/badge/badge.tsx`
- Registry item: `/r/badge.json`
- Description: Compact status and label badge primitive.
- Import: `import { Badge } from "@quinkit/ui";`

### Button

- Slug: `button`
- Source: `packages/ui/src/components/atoms/button/button.tsx`
- Registry item: `/r/button.json`
- Description: Accessible, theme-aware button primitive with variants and sizes.
- Import: `import { Button } from "@quinkit/ui";`

### Checkbox

- Slug: `checkbox`
- Source: `packages/ui/src/components/atoms/checkbox/checkbox.tsx`
- Registry item: `/r/checkbox.json`
- Description: Radix-based checkbox primitive with accessible checked states.
- Import: `import { Checkbox } from "@quinkit/ui";`

### Input

- Slug: `input`
- Source: `packages/ui/src/components/atoms/input/input.tsx`
- Registry item: `/r/input.json`
- Description: Theme-aware text input primitive for forms and search fields.
- Import: `import { Input } from "@quinkit/ui";`

### Label

- Slug: `label`
- Source: `packages/ui/src/components/atoms/label/label.tsx`
- Registry item: `/r/label.json`
- Description: Accessible form label primitive built on Radix Label.
- Import: `import { Label } from "@quinkit/ui";`

### Radio Group

- Slug: `radio-group`
- Source: `packages/ui/src/components/atoms/radio-group/radio-group.tsx`
- Registry item: `/r/radio-group.json`
- Description: Radix-based radio group primitive for single-choice inputs.
- Import: `import { RadioGroup } from "@quinkit/ui";`

### Select

- Slug: `select`
- Source: `packages/ui/src/components/atoms/select/select.tsx`
- Registry item: `/r/select.json`
- Description: Radix-based select primitive with trigger, content, and items.
- Import: `import { Select } from "@quinkit/ui";`

### Separator

- Slug: `separator`
- Source: `packages/ui/src/components/atoms/separator/separator.tsx`
- Registry item: `/r/separator.json`
- Description: Accessible visual separator primitive.
- Import: `import { Separator } from "@quinkit/ui";`

### Spinner

- Slug: `spinner`
- Source: `packages/ui/src/components/atoms/spinner/spinner.tsx`
- Registry item: `/r/spinner.json`
- Description: Reduced-motion-aware loading spinner primitive.
- Import: `import { Spinner } from "@quinkit/ui";`

### Switch

- Slug: `switch`
- Source: `packages/ui/src/components/atoms/switch/switch.tsx`
- Registry item: `/r/switch.json`
- Description: Radix-based switch primitive for boolean settings.
- Import: `import { Switch } from "@quinkit/ui";`

### Textarea

- Slug: `textarea`
- Source: `packages/ui/src/components/atoms/textarea/textarea.tsx`
- Registry item: `/r/textarea.json`
- Description: Theme-aware multiline text input primitive.
- Import: `import { Textarea } from "@quinkit/ui";`

## Molecules

### Accordion

- Slug: `accordion`
- Source: `packages/ui/src/components/molecules/accordion/accordion.tsx`
- Registry item: `/r/accordion.json`
- Description: Radix-based accordion component for collapsible content sections.
- Import: `import { Accordion } from "@quinkit/ui";`

### Alert Dialog

- Slug: `alert-dialog`
- Source: `packages/ui/src/components/molecules/alert-dialog/alert-dialog.tsx`
- Registry item: `/r/alert-dialog.json`
- Description: Radix-based alert dialog for destructive or confirmation flows.
- Import: `import { AlertDialog } from "@quinkit/ui";`

### Card

- Slug: `card`
- Source: `packages/ui/src/components/molecules/card/card.tsx`
- Registry item: `/r/card.json`
- Description: Composable card layout with header, content, and footer slots.
- Import: `import { Card } from "@quinkit/ui";`

### Command

- Slug: `command`
- Source: `packages/ui/src/components/molecules/command/command.tsx`
- Registry item: `/r/command.json`
- Description: Command palette component powered by cmdk.
- Import: `import { Command } from "@quinkit/ui";`

### Dialog

- Slug: `dialog`
- Source: `packages/ui/src/components/molecules/dialog/dialog.tsx`
- Registry item: `/r/dialog.json`
- Description: Radix-based modal dialog primitive.
- Import: `import { Dialog } from "@quinkit/ui";`

### Dropdown Menu

- Slug: `dropdown-menu`
- Source: `packages/ui/src/components/molecules/dropdown-menu/dropdown-menu.tsx`
- Registry item: `/r/dropdown-menu.json`
- Description: Radix-based dropdown menu for contextual actions.
- Import: `import { DropdownMenu } from "@quinkit/ui";`

### Navigation Menu

- Slug: `navigation-menu`
- Source: `packages/ui/src/components/molecules/navigation-menu/navigation-menu.tsx`
- Registry item: `/r/navigation-menu.json`
- Description: Radix-based navigation menu for top-level app navigation.
- Import: `import { NavigationMenu } from "@quinkit/ui";`

### Popover

- Slug: `popover`
- Source: `packages/ui/src/components/molecules/popover/popover.tsx`
- Registry item: `/r/popover.json`
- Description: Radix-based popover for floating contextual content.
- Import: `import { Popover } from "@quinkit/ui";`

### Sheet

- Slug: `sheet`
- Source: `packages/ui/src/components/molecules/sheet/sheet.tsx`
- Registry item: `/r/sheet.json`
- Description: Slide-out panel component built on Radix Dialog.
- Import: `import { Sheet } from "@quinkit/ui";`

### Tabs

- Slug: `tabs`
- Source: `packages/ui/src/components/molecules/tabs/tabs.tsx`
- Registry item: `/r/tabs.json`
- Description: Radix-based tabs component for switching content panels.
- Import: `import { Tabs } from "@quinkit/ui";`

### Toast

- Slug: `toast`
- Source: `packages/ui/src/components/molecules/toast/toast.tsx`
- Registry item: `/r/toast.json`
- Description: Sonner-backed toast exports for app notifications.
- Import: `import { Toast } from "@quinkit/ui";`

### Tooltip

- Slug: `tooltip`
- Source: `packages/ui/src/components/molecules/tooltip/tooltip.tsx`
- Registry item: `/r/tooltip.json`
- Description: Radix-based tooltip component for contextual help.
- Import: `import { Tooltip } from "@quinkit/ui";`

## Data Feedback

### Alert

- Slug: `alert`
- Source: `packages/ui/src/components/data-feedback/alert/alert.tsx`
- Registry item: `/r/alert.json`
- Description: Theme-aware alert component for status feedback.
- Import: `import { Alert } from "@quinkit/ui";`

### Aspect Ratio

- Slug: `aspect-ratio`
- Source: `packages/ui/src/components/data-feedback/aspect-ratio/aspect-ratio.tsx`
- Registry item: `/r/aspect-ratio.json`
- Description: Aspect-ratio media wrapper built on Radix Aspect Ratio.
- Import: `import { AspectRatio } from "@quinkit/ui";`

### Breadcrumb

- Slug: `breadcrumb`
- Source: `packages/ui/src/components/data-feedback/breadcrumb/breadcrumb.tsx`
- Registry item: `/r/breadcrumb.json`
- Description: Breadcrumb navigation component for hierarchical pages.
- Import: `import { Breadcrumb } from "@quinkit/ui";`

### Calendar

- Slug: `calendar`
- Source: `packages/ui/src/components/data-feedback/calendar/calendar.tsx`
- Registry item: `/r/calendar.json`
- Description: Date selection calendar built on react-day-picker.
- Import: `import { Calendar } from "@quinkit/ui";`

### Data Table

- Slug: `data-table`
- Source: `packages/ui/src/components/data-feedback/data-table/data-table.tsx`
- Registry item: `/r/data-table.json`
- Description: TanStack Table based data table with sorting, filtering, and pagination.
- Import: `import { DataTable } from "@quinkit/ui";`

### Date Range Picker

- Slug: `date-range-picker`
- Source: `packages/ui/src/components/data-feedback/date-range-picker/date-range-picker.tsx`
- Registry item: `/r/date-range-picker.json`
- Description: Date range picker composed from calendar primitives.
- Import: `import { DateRangePicker } from "@quinkit/ui";`

### Pagination

- Slug: `pagination`
- Source: `packages/ui/src/components/data-feedback/pagination/pagination.tsx`
- Registry item: `/r/pagination.json`
- Description: Pagination component for page-based navigation.
- Import: `import { Pagination } from "@quinkit/ui";`

### Progress

- Slug: `progress`
- Source: `packages/ui/src/components/data-feedback/progress/progress.tsx`
- Registry item: `/r/progress.json`
- Description: Progress indicators for linear and circular loading states.
- Import: `import { Progress } from "@quinkit/ui";`

### Scroll Area

- Slug: `scroll-area`
- Source: `packages/ui/src/components/data-feedback/scroll-area/scroll-area.tsx`
- Registry item: `/r/scroll-area.json`
- Description: Radix-based scroll area wrapper.
- Import: `import { ScrollArea } from "@quinkit/ui";`

### Skeleton

- Slug: `skeleton`
- Source: `packages/ui/src/components/data-feedback/skeleton/skeleton.tsx`
- Registry item: `/r/skeleton.json`
- Description: Skeleton placeholder component for loading states.
- Import: `import { Skeleton } from "@quinkit/ui";`

### Table

- Slug: `table`
- Source: `packages/ui/src/components/data-feedback/table/table.tsx`
- Registry item: `/r/table.json`
- Description: Styled table primitives for semantic tabular layouts.
- Import: `import { Table } from "@quinkit/ui";`

## Organisms

### Combobox

- Slug: `combobox`
- Source: `packages/ui/src/components/organisms/combobox/combobox.tsx`
- Registry item: `/r/combobox.json`
- Description: Searchable select/combobox organism for option-heavy forms.
- Import: `import { Combobox } from "@quinkit/ui";`

### Form

- Slug: `form`
- Source: `packages/ui/src/components/organisms/form/form.tsx`
- Registry item: `/r/form.json`
- Description: React Hook Form integration primitives.
- Import: `import { Form } from "@quinkit/ui";`

### Sidebar

- Slug: `sidebar`
- Source: `packages/ui/src/components/organisms/sidebar/sidebar.tsx`
- Registry item: `/r/sidebar.json`
- Description: Collapsible sidebar organism with navigation items.
- Import: `import { Sidebar } from "@quinkit/ui";`