@fluid

Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with…

Utility function for merging Tailwind CSS classes with clsx and tailwind-merge.

Spring animation token presets for Framer Motion (fast, moderate, slow).

Variable font weight tokens for Inter (normal, medium, semibold, bold) using font-variation-settings.

React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate …

Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names.

Elevation primitive. Wraps the read-substrate / compute-level / apply-classes / re-provide-context pattern into one component. Pulls in the surface theme token…

React context provider for runtime shape variant switching (pill or rounded). Controls border-radius across all Fluid Functionalism components.

React context provider for runtime icon library switching with Lucide fallback.

Canonical icon name mapping across Lucide, Tabler, Phosphor, HugeIcons, and Untitled UI.

React hook for proximity-based hover detection. Tracks the closest item to the mouse cursor within a container, enabling smooth animated background indicators.

Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh…

React hook + renderer for the selected-background merge/split animation. When one row bridges or splits two contiguous selected runs, their inner edges glide t…

Collapsible accordion with animated height transitions, spring-animated chevron, and proximity hover in grouped mode. Built on Radix UI Accordion.

Collapsible accordion with animated height transitions, spring-animated chevron, and proximity hover in grouped mode. Base UI flavor.

Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip, proximity-based hover,…

Compact label with solid and dot variants, Tailwind color palette, and three sizes.

Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover.

Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover. Base UI flavor.

Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-sel…

Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-sel…

Animated checkbox group with proximity hover, contiguous selection merging, and spring-animated check marks. Built on Radix UI Checkbox.

Animated checkbox group with proximity hover, contiguous selection merging, and spring-animated check marks. Base UI flavor.

Animated radio group with proximity hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index and value-based API…

Animated radio group with proximity hover, spring-animated selection dot. Base UI flavor.

Animated modal dialog with spring-based scale and opacity transitions. Built on Radix UI Dialog with overlay, header, footer, title, and description sub-compon…

Animated modal dialog with spring-based scale and opacity transitions. Base UI flavor.

Slide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor.

Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.

Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.

Grouped input fields with proximity-based highlighting, animated label transitions, optional icons, and error states.

Chat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible left/right action slots, and a built-in se…

Read-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner shows while either resolves. Adapts its c…

A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted bubble for the assistant,…

Horizontal tab navigation with proximity hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.

Horizontal tab navigation with proximity hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.

Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.

Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.

Animated table with proximity-based row hover highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell su…

Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.

Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.

Segmented control tabs with sliding active indicator, proximity hover, and spring animations. Built on Radix UI Tabs.

Segmented control tabs with sliding active indicator, proximity hover, and spring animations. Base UI flavor.

Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words.

Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on to…

Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on to…

Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Radix flavor.

Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Base UI flavor.

Floating tooltip with spring-based animations, configurable placement, and rich content support.

Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.

Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.

Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.

Color picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on Base UI's Popover, Menu, and NumberField …