# 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)
- [Utilities](https://ui-kit.chunk-creations.com/utilities)

## 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. Built on Base UI's [`Avatar`](https://base-ui.com/react/components/avatar).
- [Breadcrumb](https://ui-kit.chunk-creations.com/components/breadcrumb): A navigation aid showing the user's location within a page hierarchy. Uses semantic HTML (`<nav>`, `<ol>`, `<li>`) with proper ARIA attributes.
- [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.
- [Collapsible](https://ui-kit.chunk-creations.com/components/collapsible): A single togglable section built on Base UI's `Collapsible` primitive. For multiple collapsible sections with exclusive selection, use `Accordion` instead.
- [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.
- [CopyButton](https://ui-kit.chunk-creations.com/components/copy-button): A button that copies a value to the clipboard and shows a brief confirmation. Transitions from a clipboard icon to a check icon on click.
- [Data Table](https://ui-kit.chunk-creations.com/components/data-table): A recipe for building data tables using [TanStack Table](https://tanstack.com/table) with chunks-ui's `Table` component for styling. TanStack handles all the logic (sorting, filtering, pagination, row selection) while `Table.*` handles the look and feel.
- [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, or with a controlled `open`, asks you to close it through `onOpenChange` (see [Open State](#open-state)).
- [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.
- [Empty](https://ui-kit.chunk-creations.com/components/empty): A structured empty state for lists, tables, and search results. Provides a consistent centered layout with optional icon, title, description, and action buttons.
- [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.
- [IconButton](https://ui-kit.chunk-creations.com/components/icon-button): A compact, square button for a single icon. Built on Base UI's `Button` primitive and sharing the same `variant` and `color` system as [`Button`](./button).
- [InputCopy](https://ui-kit.chunk-creations.com/components/input-copy): A read-only input with an integrated copy button. Composes `Input` and `CopyButton` internally.
- [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`.
- [Label](https://ui-kit.chunk-creations.com/components/label): A standalone form label with consistent typography. Use when you need a label outside of a `Field` context. For labels inside a `Field.Root`, use `Field.Label` instead.
- [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.
- [Pagination](https://ui-kit.chunk-creations.com/components/pagination): A navigation component for paginated content. Uses semantic HTML (`<nav>`, `<ul>`, `<li>`) with `aria-label="Pagination"`. Unstyled structure — consumers provide page range logic.
- [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.
- [Resizable](https://ui-kit.chunk-creations.com/components/resizable): A split-pane layout: two or more panels in a row or a column, with a draggable, keyboard-operable handle between each pair. Built for master/detail screens, editors with a terminal, and inspector sidebars. Sizes are in px, in %, or both, and the layout can be saved and restored with no storage code in the component.
- [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.
- [Skeleton](https://ui-kit.chunk-creations.com/components/skeleton): A placeholder loading indicator. CSS-only animation with `animate-pulse` on a muted background. Use className to control size and shape.
- [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.
- [Table](https://ui-kit.chunk-creations.com/components/table): A compound styling component for HTML tables. Zero logic — just consistent styling for headers, rows, cells, and captions. Pairs perfectly with [TanStack Table](https://tanstack.com/table) for data-rich use cases (see [Data Table](/components/data-table)).
- [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.
- [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 corner at the inline end (bottom-right in left-to-right layouts, bottom-left in right-to-left ones) and auto-dismiss. In both directions a toast can be swiped away down, left or right, and it leaves the way it was swiped. 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). When the group is hidden (for example with `display: none`) and shown again, the indicator appears over the pressed item instead of growing from nothing. Only pressing another item slides the indicator: when an item or the group changes size (for example a font size, padding or container width change), it moves to the pressed item at once, so it does not trail behind it.
- [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/llms-full.txt)