# chunks-ui

> React 19+ component library built on Base UI, Tailwind CSS v4, and Motion. Single npm package replacing @creation-ui/react.

## Install

```bash
bun add chunks-ui motion
```

## Docs

- [Getting Started](https://ui-kit.chunk-creations.com/getting-started)
- [Theme](https://ui-kit.chunk-creations.com/theme)

## Components

- [Accordion](https://ui-kit.chunk-creations.com/components/accordion): A vertically stacked set of collapsible sections built on Base UI's `Accordion` primitive. Each item has a trigger header that reveals its panel with an animated height transition.
- [Avatar](https://ui-kit.chunk-creations.com/components/avatar): Displays a user avatar image with automatic fallback to initials. Supports numeric sizing and multiple shapes.
- [Button](https://ui-kit.chunk-creations.com/components/button): A styled button component built on Base UI's `Button` primitive. Supports multiple visual variants, semantic colors, loading state, and start/end icons.
- [Calendar](https://ui-kit.chunk-creations.com/components/calendar): A standalone date picker grid built without an external primitive. Supports controlled and uncontrolled selection, min/max bounds, and custom disabled-date predicates.
- [Card](https://ui-kit.chunk-creations.com/components/card): A compound layout component for displaying grouped content. Built with plain HTML elements (no Base UI dependency). Follows the compound pattern: `Card.Root`, `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`, `Card.Footer`.
- [Checkbox](https://ui-kit.chunk-creations.com/components/checkbox): A styled checkbox built on Base UI's `Checkbox` primitive. Supports checked, unchecked, and indeterminate states with a compound component pattern.
- [Chip](https://ui-kit.chunk-creations.com/components/chip): A small label/tag component with optional remove functionality. Uses the `ClearButton` component internally for the dismiss action.
- [ClearButton](https://ui-kit.chunk-creations.com/components/clear-button): A small circular icon button for clearing or dismissing values. Used internally by `Input` (via `onClear`) and `Chip` (via `onRemove`), but also exported for direct use.
- [Combobox](https://ui-kit.chunk-creations.com/components/combobox): A styled autocomplete/combobox built on Base UI's `Combobox` primitive. Includes text input with built-in filtering, popup with items, grouped options, multi-select with chips, and built-in Floating UI positioning.
- [DatePicker](https://ui-kit.chunk-creations.com/components/date-picker): A trigger-and-popover date picker built on Base UI's `Popover` primitive and the `Calendar` component. Selecting a date closes the popover automatically.
- [Dialog](https://ui-kit.chunk-creations.com/components/dialog): A modal dialog built on Base UI's `Dialog` primitive. Includes a backdrop overlay, centered popup with scale/fade animation, title, and description.
- [Drawer](https://ui-kit.chunk-creations.com/components/drawer): A side or bottom sheet overlay built on Base UI's `Dialog` primitive. Slides in from the left, right, or bottom edge with a snappy easing transition.
- [Field](https://ui-kit.chunk-creations.com/components/field): A form field wrapper built on Base UI's `Field` primitive. Provides label, description, error message, and validation state management for form controls like `Input`, `Textarea`, `Checkbox`, etc.
- [Input](https://ui-kit.chunk-creations.com/components/input): A styled text input built on Base UI's `Input` primitive. Supports start/end adornments, a clear button, and error states via `data-[invalid]`.
- [Loader](https://ui-kit.chunk-creations.com/components/loader): An animated SVG spinner for loading states. Used internally by `Button` during its loading state, and available for standalone use.
- [Menu](https://ui-kit.chunk-creations.com/components/menu): A dropdown menu built on Base UI's `Menu` primitive. Supports plain items, groups, checkbox items, and radio groups. Animates with Motion when available, falls back to CSS transitions.
- [NumberField](https://ui-kit.chunk-creations.com/components/number-field): A numeric input built on Base UI's `NumberField` primitive. Supports increment/decrement buttons, min/max/step constraints, and scrub-area drag interaction.
- [Popover](https://ui-kit.chunk-creations.com/components/popover): A positioned popup built on Base UI's `Popover` primitive. Includes built-in Floating UI positioning, an optional arrow, and scale/fade enter/exit transitions.
- [Progress](https://ui-kit.chunk-creations.com/components/progress): A progress bar built on Base UI's `Progress` primitive. Supports determinate values and an indeterminate loading state.
- [Radio](https://ui-kit.chunk-creations.com/components/radio): Radio buttons built on Base UI's `Radio` and `RadioGroup` primitives. Includes a group wrapper for managing single-selection among multiple options.
- [ScrollArea](https://ui-kit.chunk-creations.com/components/scroll-area): A custom scrollable container built on Base UI's `ScrollArea` primitive. Hides native scrollbars and replaces them with styled overlays that appear on hover or scroll.
- [Select](https://ui-kit.chunk-creations.com/components/select): A styled single-select dropdown built on Base UI's `Select` primitive. Includes trigger, popup, items, grouped options, and built-in Floating UI positioning.
- [Separator](https://ui-kit.chunk-creations.com/components/separator): A visual divider built on Base UI's `Separator` primitive. Supports horizontal and vertical orientations.
- [Slider](https://ui-kit.chunk-creations.com/components/slider): A draggable range input built on Base UI's `Slider` primitive. Supports single values, ranges, horizontal and vertical orientations, and keyboard navigation.
- [Switch](https://ui-kit.chunk-creations.com/components/switch): A toggle switch built on Base UI's `Switch` primitive. Provides an accessible on/off control with a sliding thumb animation.
- [Tabs](https://ui-kit.chunk-creations.com/components/tabs): A tabbed navigation component built on Base UI's `Tabs` primitive. Features an animated indicator that slides between active tabs using CSS transitions with the `ease-snappy` easing curve.
- [Textarea](https://ui-kit.chunk-creations.com/components/textarea): A multi-line text input with optional auto-resize behavior using the CSS `field-sizing: content` property.
- [ThemeToggle](https://ui-kit.chunk-creations.com/components/theme-toggle): A controlled button for switching between light and dark themes. Animates between sun and moon icons with a crossfade, and respects `prefers-reduced-motion`.
- [Toast](https://ui-kit.chunk-creations.com/components/toast): A notification system built on Base UI's `Toast` primitive. Toasts slide in from the bottom-right corner and auto-dismiss. The `useToast` hook triggers them from anywhere within the provider.
- [Toggle Group](https://ui-kit.chunk-creations.com/components/toggle-group): A group of toggle buttons where one or multiple items can be pressed at a time. Built on Base UI's `Toggle` and `ToggleGroup` primitives. In single-select mode, a sliding indicator animates between the active item using Motion (with CSS transition fallback).
- [Tooltip](https://ui-kit.chunk-creations.com/components/tooltip): A hover/focus tooltip built on Base UI's `Tooltip` primitive. Automatically positioned via Floating UI with a scale/fade transition.

## Optional

- [Full documentation](https://ui-kit.chunk-creations.com/llm-full.txt)