# Quinkit UI

> Domain-specific React components built on Radix UI, Tailwind CSS, Storybook, and strict TypeScript.

The public package is `@quinkit/ui@0.1.9`. Install it with `pnpm add @quinkit/ui`, import styles once with `import "@quinkit/ui/styles";`, and import components from the package root.

## Documentation

- [Quinkit UI documentation](https://quinkit-ui.vercel.app/docs): Installation, theming, palettes, and usage guidance.
- [Component documentation](https://quinkit-ui.vercel.app/docs/components): Live examples and API guidance for every public component.
- [Theme Studio](https://quinkit-ui.vercel.app/docs/theme-studio): Interactive theme and palette previews.
- [Registry documentation](https://quinkit-ui.vercel.app/docs/registry): shadcn-compatible registry installation guidance.
- [Full LLM reference](https://quinkit-ui.vercel.app/llms-full.txt): Expanded component and registry context.
- [Registry index](https://quinkit-ui.vercel.app/r/index.json): Machine-readable registry inventory.
- [npm package](https://www.npmjs.com/package/@quinkit/ui): Published package metadata and versions.
- [Source repository](https://github.com/nomiwsd/quinkit-ui): Source code, issues, and contribution history.

## Components

- [Accordion](https://quinkit-ui.vercel.app/docs/components/molecules/accordion): Radix-based accordion component for collapsible content sections.
- [Alert](https://quinkit-ui.vercel.app/docs/components/data-feedback/alert): Theme-aware alert component for status feedback.
- [Alert Dialog](https://quinkit-ui.vercel.app/docs/components/molecules/alert-dialog): Radix-based alert dialog for destructive or confirmation flows.
- [Aspect Ratio](https://quinkit-ui.vercel.app/docs/components/data-feedback/aspect-ratio): Aspect-ratio media wrapper built on Radix Aspect Ratio.
- [Avatar](https://quinkit-ui.vercel.app/docs/components/atoms/avatar): Accessible avatar primitive with image and fallback support.
- [Badge](https://quinkit-ui.vercel.app/docs/components/atoms/badge): Compact status and label badge primitive.
- [Breadcrumb](https://quinkit-ui.vercel.app/docs/components/data-feedback/breadcrumb): Breadcrumb navigation component for hierarchical pages.
- [Button](https://quinkit-ui.vercel.app/docs/components/atoms/button): Accessible, theme-aware button primitive with variants and sizes.
- [Calendar](https://quinkit-ui.vercel.app/docs/components/data-feedback/calendar): Date selection calendar built on react-day-picker.
- [Card](https://quinkit-ui.vercel.app/docs/components/molecules/card): Composable card layout with header, content, and footer slots.
- [Checkbox](https://quinkit-ui.vercel.app/docs/components/atoms/checkbox): Radix-based checkbox primitive with accessible checked states.
- [Combobox](https://quinkit-ui.vercel.app/docs/components/organisms/combobox): Searchable select/combobox organism for option-heavy forms.
- [Command](https://quinkit-ui.vercel.app/docs/components/molecules/command): Command palette component powered by cmdk.
- [Data Table](https://quinkit-ui.vercel.app/docs/components/data-feedback/data-table): TanStack Table based data table with sorting, filtering, and pagination.
- [Date Range Picker](https://quinkit-ui.vercel.app/docs/components/data-feedback/date-range-picker): Date range picker composed from calendar primitives.
- [Dialog](https://quinkit-ui.vercel.app/docs/components/molecules/dialog): Radix-based modal dialog primitive.
- [Dropdown Menu](https://quinkit-ui.vercel.app/docs/components/molecules/dropdown-menu): Radix-based dropdown menu for contextual actions.
- [Form](https://quinkit-ui.vercel.app/docs/components/organisms/form): React Hook Form integration primitives.
- [Input](https://quinkit-ui.vercel.app/docs/components/atoms/input): Theme-aware text input primitive for forms and search fields.
- [Label](https://quinkit-ui.vercel.app/docs/components/atoms/label): Accessible form label primitive built on Radix Label.
- [Navigation Menu](https://quinkit-ui.vercel.app/docs/components/molecules/navigation-menu): Radix-based navigation menu for top-level app navigation.
- [Pagination](https://quinkit-ui.vercel.app/docs/components/data-feedback/pagination): Pagination component for page-based navigation.
- [Popover](https://quinkit-ui.vercel.app/docs/components/molecules/popover): Radix-based popover for floating contextual content.
- [Progress](https://quinkit-ui.vercel.app/docs/components/data-feedback/progress): Progress indicators for linear and circular loading states.
- [Radio Group](https://quinkit-ui.vercel.app/docs/components/atoms/radio-group): Radix-based radio group primitive for single-choice inputs.
- [Scroll Area](https://quinkit-ui.vercel.app/docs/components/data-feedback/scroll-area): Radix-based scroll area wrapper.
- [Select](https://quinkit-ui.vercel.app/docs/components/atoms/select): Radix-based select primitive with trigger, content, and items.
- [Separator](https://quinkit-ui.vercel.app/docs/components/atoms/separator): Accessible visual separator primitive.
- [Sheet](https://quinkit-ui.vercel.app/docs/components/molecules/sheet): Slide-out panel component built on Radix Dialog.
- [Sidebar](https://quinkit-ui.vercel.app/docs/components/organisms/sidebar): Collapsible sidebar organism with navigation items.
- [Skeleton](https://quinkit-ui.vercel.app/docs/components/data-feedback/skeleton): Skeleton placeholder component for loading states.
- [Spinner](https://quinkit-ui.vercel.app/docs/components/atoms/spinner): Reduced-motion-aware loading spinner primitive.
- [Switch](https://quinkit-ui.vercel.app/docs/components/atoms/switch): Radix-based switch primitive for boolean settings.
- [Table](https://quinkit-ui.vercel.app/docs/components/data-feedback/table): Styled table primitives for semantic tabular layouts.
- [Tabs](https://quinkit-ui.vercel.app/docs/components/molecules/tabs): Radix-based tabs component for switching content panels.
- [Textarea](https://quinkit-ui.vercel.app/docs/components/atoms/textarea): Theme-aware multiline text input primitive.
- [Toast](https://quinkit-ui.vercel.app/docs/components/molecules/toast): Sonner-backed toast exports for app notifications.
- [Tooltip](https://quinkit-ui.vercel.app/docs/components/molecules/tooltip): Radix-based tooltip component for contextual help.