# Tidal Design System

> A shadcn-style component library and design token system, sourced from Figma. Lilac brand, Söhne family, light + dark modes.

## Getting started

- [Introduction](https://tidal-design-system-docs.vercel.app/): What Tidal is, and where the sources of truth live.
- [Installation](https://tidal-design-system-docs.vercel.app/installation): Local dev setup.
- [Using with agents](https://tidal-design-system-docs.vercel.app/using-with-agents): How to point an AI coding agent at Tidal docs — CLAUDE.md templates, remote llms.txt endpoints, and prompt patterns.

## Tokens

- [Colors](https://tidal-design-system-docs.vercel.app/tokens/colors): Semantic color tokens (light + dark) and the Liquid brand palette.
- [Typography](https://tidal-design-system-docs.vercel.app/tokens/typography): Inter / Söhne / Georgia / JetBrains Mono, mode-aware fonts, weights, sizes (Internal vs External), line heights.
- [Spacing & radius](https://tidal-design-system-docs.vercel.app/tokens/spacing): Spacing scale, radius tokens, shadow scale.
- [Gradients & rings](https://tidal-design-system-docs.vercel.app/tokens/gradients): Button gradients, primary/destructive focus rings.

## Components

- [Button](https://tidal-design-system-docs.vercel.app/components/button): variant × tone × size, gradient hover cross-fades, icon slots, loading.
- [IconButton](https://tidal-design-system-docs.vercel.app/components/icon-button): Square variant of Button. Sizes xs/sm/md matching the xs|sm|md|lg scale.
- [Input](https://tidal-design-system-docs.vercel.app/components/input): Icon slots, invalid/disabled/readOnly states, hover overlay, focus ring.
- [Input OTP](https://tidal-design-system-docs.vercel.app/components/input-otp): One-time password input — one cell per character. Built on the input-otp library.
- [Label](https://tidal-design-system-docs.vercel.app/components/label): Native <label> for form controls, text-sm font-medium.
- [Checkbox](https://tidal-design-system-docs.vercel.app/components/checkbox): Radix-based checkbox with indeterminate + destructive tone.
- [RadioGroup](https://tidal-design-system-docs.vercel.app/components/radio-group): Mutually-exclusive options. Radix-based.
- [Badge](https://tidal-design-system-docs.vercel.app/components/badge): Compact status/label pill. variant (solid|secondary|outline) × tone (default|destructive|success).
- [Textarea](https://tidal-design-system-docs.vercel.app/components/textarea): Multi-line input with the same styling as Input.
- [Field](https://tidal-design-system-docs.vercel.app/components/field): Slot-based label + control + description/error. Works with or without a form input.
- [Popover](https://tidal-design-system-docs.vercel.app/components/popover): Radix-based floating panel anchored to a trigger.
- [MenuItem](https://tidal-design-system-docs.vercel.app/components/menu-item): Building block for dropdown/menu/command rows — icon, label, shortcut, check/radio, submenu chevron.
- [Separator](https://tidal-design-system-docs.vercel.app/components/separator): Thin divider (horizontal or vertical).
- [Breadcrumb](https://tidal-design-system-docs.vercel.app/components/breadcrumb): Path to the current resource using a hierarchy of links. Compositional: Breadcrumb/List/Item/Link/Page/Separator/Ellipsis.
- [Tabs](https://tidal-design-system-docs.vercel.app/components/tabs): Layered sections, one at a time. Pill or underline variant, optional stretch.
- [NavigationMenu](https://tidal-design-system-docs.vercel.app/components/navigation-menu): Top-of-page site nav with popover panels — grouped link grids, images, descriptions.
- [Chart](https://tidal-design-system-docs.vercel.app/components/chart): recharts wrapper with 5 themed series colors (Lilac/Viola/Mandarin/Lime/Cerulean).
- [Command](https://tidal-design-system-docs.vercel.app/components/command): Searchable command palette. cmdk + our styling.
- [DropdownMenu](https://tidal-design-system-docs.vercel.app/components/dropdown-menu): Tight Radix dropdown with check/radio items, submenus, shortcuts.
- [Card](https://tidal-design-system-docs.vercel.app/components/card): Composable surface with optional Header/Content/Footer and three elevations.
- [Toggle](https://tidal-design-system-docs.vercel.app/components/toggle): Two-state button (pressed/not). Default or outline, sm/md/lg. Built on Radix Toggle.
- [ToggleGroup](https://tidal-design-system-docs.vercel.app/components/toggle-group): Set of toggles sharing a value. type=single (radio-like) or multiple (independent).
- [Toast](https://tidal-design-system-docs.vercel.app/components/toast): Transient notification. Action defaults to outlined; close button slides in on hover.
- [Sonner](https://tidal-design-system-docs.vercel.app/components/sonner): Stackable, swipeable toast notifications with an imperative toast() API. Built on sonner; prefer over Toast for most notification needs.
- [Alert](https://tidal-design-system-docs.vercel.app/components/alert): Inline callout with optional icon, title, description. default | destructive.
- [Select](https://tidal-design-system-docs.vercel.app/components/select): Enum picker — no typing. Default-button chrome trigger.
- [Combobox](https://tidal-design-system-docs.vercel.app/components/combobox): Searchable single-value picker. Input-chrome trigger; Command filter inside the popover.
- [ScrollFade](https://tidal-design-system-docs.vercel.app/components/scroll-fade): Wraps a scrollable region; overlays a gradient fade at the edges where content is clipped.
- [ScrollArea](https://tidal-design-system-docs.vercel.app/components/scroll-area): Custom-styled scrollbar for bounded regions. Built on @radix-ui/react-scroll-area.
- [Sidebar](https://tidal-design-system-docs.vercel.app/components/sidebar): Anchored, collapsible panel for navigation or inspector tools. Icon rail + offcanvas + mobile drawer.
- [SidePanel](https://tidal-design-system-docs.vercel.app/components/sidepanel): Persistent right-side inspector panel — header aligned to page header, stack of static or collapsible sections with optional info tooltips.
- [Tooltip](https://tidal-design-system-docs.vercel.app/components/tooltip): Inverted hover/focus tip. Adapted from shadcn with Tidal surface + delay tuning.
- [Dialog](https://tidal-design-system-docs.vercel.app/components/dialog): Centered modal surface for focused tasks. Popover-family surface with a light scrim.
- [AlertDialog](https://tidal-design-system-docs.vercel.app/components/alert-dialog): Destructive-confirmation modal. Lilac-primary action, outlined cancel, popover surface.
- [Sheet](https://tidal-design-system-docs.vercel.app/components/sheet): Modal side drawer docked to any edge. Same floating-surface family as Dialog.
- [Accordion](https://tidal-design-system-docs.vercel.app/components/accordion): Collapsible vertical sections. Chevron rotates on expand; border-less variant via `border` prop.
- [Collapsible](https://tidal-design-system-docs.vercel.app/components/collapsible): Single expand/collapse panel. Built on Radix Collapsible.
- [Switch](https://tidal-design-system-docs.vercel.app/components/switch): Two-state toggle for settings that take effect immediately. Flat Lilac when checked, muted when unchecked.
- [Progress](https://tidal-design-system-docs.vercel.app/components/progress): Horizontal progress bar with four sizes (xs/sm/md/lg). Flat lilac indicator on a muted track.
- [Slider](https://tidal-design-system-docs.vercel.app/components/slider): Single- or range-value numeric input. Built on Radix Slider.
- [Avatar](https://tidal-design-system-docs.vercel.app/components/avatar): Circular or rounded user image + text fallback. Six sizes (xs/sm/md/lg/xl/2xl).
- [Skeleton](https://tidal-design-system-docs.vercel.app/components/skeleton): Pulsing loading placeholder. Ported from shadcn (WIP).
- [Calendar](https://tidal-design-system-docs.vercel.app/components/calendar): Date picker for single date, multiple dates, or a range. Built on react-day-picker v8.
- [Carousel](https://tidal-design-system-docs.vercel.app/components/carousel): Horizontally or vertically scrolling slides. Thin wrapper around embla-carousel-react.
- [Pagination](https://tidal-design-system-docs.vercel.app/components/pagination): Page navigation for paginated result lists. Compositional: Pagination/Content/Item/Link/Previous/Next/Ellipsis.
- [Data Table](https://tidal-design-system-docs.vercel.app/components/data-table): Styled table primitives (Table/Header/Body/Footer/Row/Head/Cell/Caption). Compose with @tanstack/react-table for sorting, filtering, pagination, row selection.

## Examples

- [IDE Screen Mock](https://tidal-design-system-docs.vercel.app/ide): Full-viewport IDE mock demonstrating PageTabBar, Sidebar, Collapsible, Breadcrumb, and status tokens in a realistic developer tool context. Includes documented design decisions.

## Source files (markdown)

- [DESIGN.md](https://tidal-design-system-docs.vercel.app/design.md): agent-facing rules for contributing to the system.
- [FIGMA_SYNC.md](https://tidal-design-system-docs.vercel.app/figma-sync.md): workflow for updating tokens/components from Figma.
- [llms-full.txt](https://tidal-design-system-docs.vercel.app/llms-full.txt): concatenated markdown of every doc page.