---
name: "@fluid"
slug: "fluid"
description: "Fluid Functionalism is a ~22-component shadcn registry focused on motion-as-information: every animation makes a state change legible rather than decorative. Components use Framer Motion springs, proximity-hover highlights, and font-weight transitions. Notable AI-oriented components include ThinkingIndicator (morphing SVG status), ThinkingSteps (chain-of-thought display), InputMessage (auto-resizing chat composer), and AskUserQuestions (stepped single/multi-select question flow). Also includes accordion, badge, button, checkbox-group, color-picker (HEX/RGB/HSL/OKLCH, eyedropper), dialog, dropdown, input-group, radio-group, select, slider, surfaces (8 elevation levels), switch, table, tabs, tabs-subtle, and tooltip. Built on Radix UI, Tailwind CSS v4, and React 19. Free, MIT licensed. Use for: building AI chat and agent interfaces where interaction feedback needs to feel calm and precise, or adding a spring-physics design language to a shadcn project."
category: "AI/chat UI"
tags: ["aesthetic", "ai", "animation", "buttons", "cards", "dashboard", "forms", "hooks", "icons", "media", "mobile", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "mickadesign"
website: "https://www.fluidfunctionalism.com"
github: "https://github.com/mickadesign/fluid-functionalism"
registry: "https://www.fluidfunctionalism.com/r/registry.json"
pro: false
pro_url: null
github_stars: 561
component_count: 70
generated_at: "2026-09-21T01:50:16.753Z"
---

# @fluid

Fluid Functionalism is a ~22-component shadcn registry focused on motion-as-information: every animation makes a state change legible rather than decorative. Components use Framer Motion springs, proximity-hover highlights, and font-weight transitions. Notable AI-oriented components include ThinkingIndicator (morphing SVG status), ThinkingSteps (chain-of-thought display), InputMessage (auto-resizing chat composer), and AskUserQuestions (stepped single/multi-select question flow). Also includes accordion, badge, button, checkbox-group, color-picker (HEX/RGB/HSL/OKLCH, eyedropper), dialog, dropdown, input-group, radio-group, select, slider, surfaces (8 elevation levels), switch, table, tabs, tabs-subtle, and tooltip. Built on Radix UI, Tailwind CSS v4, and React 19. Free, MIT licensed. Use for: building AI chat and agent interfaces where interaction feedback needs to feel calm and precise, or adding a spring-physics design language to a shadcn project.

## Links

- Website: https://www.fluidfunctionalism.com
- GitHub: https://github.com/mickadesign/fluid-functionalism
- Registry JSON: https://www.fluidfunctionalism.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/fluid
- This file: https://sh4dcn.vercel.app/md/fluid.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.fluidfunctionalism.com/r/registry.json
pnpm dlx shadcn@latest add https://www.fluidfunctionalism.com/r/registry.json
bunx shadcn@latest add https://www.fluidfunctionalism.com/r/registry.json
# clone the source repo
git clone https://github.com/mickadesign/fluid-functionalism.git
# fetch the raw registry index
curl -s https://www.fluidfunctionalism.com/r/registry.json
```

## Components (70)

| name | type | description | install |
| --- | --- | --- | --- |
| surfaces | registry:theme | Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/surfaces.json` |
| tokens | registry:theme | Shared interaction-state tokens: surface-relative hover/active overlays (bg-hover, bg-active), the selected fill, the destructive-light ground, the --overlay R… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tokens.json` |
| utils | registry:lib | Utility function for merging Tailwind CSS classes with clsx and tailwind-merge. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/utils.json` |
| springs | registry:lib | Spring animation token presets for Framer Motion (fast, moderate, slow). | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/springs.json` |
| font-weight | registry:lib | Variable font weight tokens for Inter (normal, medium, semibold, bold) using font-variation-settings. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/font-weight.json` |
| surface-context | registry:lib | React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate … | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/surface-context.json` |
| surface-classes | registry:lib | Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/surface-classes.json` |
| elevated | registry:lib | Elevation primitive. Wraps the read-substrate / compute-level / apply-classes / re-provide-context pattern into one component. Pulls in the surface theme token… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/elevated.json` |
| popup | registry:lib | Shared popup chrome for the dropdown, select, and combobox popups: side-aware enter/exit motion classes driven by the positioner's resolved data-side, the Scro… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/popup.json` |
| shape-context | registry:lib | React context provider for runtime shape variant switching (pill or rounded). Controls border-radius across all Fluid Functionalism components. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/shape-context.json` |
| size-context | registry:lib | React context provider for the two-step size ladder (36px default, 28px compact). Controls control heights, text, icon, and padding scale across all Fluid Func… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/size-context.json` |
| icon-context | registry:lib | Named icon slots with a Lucide default set; swap any icon via IconProvider. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/icon-context.json` |
| use-fluid-hover | registry:hook | Fluid hover: the hook that tracks the item nearest the cursor within a container, and the one highlight component that springs between the rects it measures. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/use-fluid-hover.json` |
| use-touch-primary | registry:hook | Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/use-touch-primary.json` |
| use-keyboard-nav-gate | registry:hook | Gates a popup's keyboard focus ring on keyboard use: seeded at open from the focused element's :focus-visible state, then earned by navigation keys inside the … | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/use-keyboard-nav-gate.json` |
| use-merge-split | registry:hook | 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… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/use-merge-split.json` |
| accordion | registry:ui | Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Built on Radix UI Accordion. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/accordion.json` |
| accordion-base | registry:ui | Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/accordion-base.json` |
| ask-user-questions | registry:ui | Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip, fluid hover, and multi… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/ask-user-questions.json` |
| badge | registry:ui | Compact label with solid and dot variants, Tailwind color palette, and three sizes. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/badge.json` |
| button | registry:ui | Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/button.json` |
| button-base | registry:ui | Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/button-base.json` |
| dropdown | registry:ui | Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select.… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dropdown.json` |
| dropdown-base | registry:ui | Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select.… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dropdown-base.json` |
| checkbox-group | registry:ui | Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Built on Radix UI Checkbox. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/checkbox-group.json` |
| checkbox-group-base | registry:ui | Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/checkbox-group-base.json` |
| radio-group | registry:ui | Animated radio group with fluid hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index and value-based APIs. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/radio-group.json` |
| radio-group-base | registry:ui | Animated radio group with fluid hover, spring-animated selection dot. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/radio-group-base.json` |
| dialog | registry:ui | Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such as a sidebar), plus a… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dialog.json` |
| dialog-base | registry:ui | Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such as a sidebar), plus a… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dialog-base.json` |
| mobile-drawer | registry:ui | Slide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/mobile-drawer.json` |
| mobile-drawer-base | registry:ui | Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/mobile-drawer-base.json` |
| input-copy | registry:ui | Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/input-copy.json` |
| input-group | registry:ui | Grouped input fields with fluid hover highlighting, animated label transitions, optional icons, and error states. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/input-group.json` |
| input-message | registry:ui | 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… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/input-message.json` |
| file-thumbnail | registry:ui | 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… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/file-thumbnail.json` |
| queued-stack | registry:block | Sonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a gutter arrow counts the overflow, edit/remo… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/queued-stack.json` |
| chat-message | registry:ui | 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,… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/chat-message.json` |
| tabs-subtle | registry:ui | Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tabs-subtle.json` |
| tabs-subtle-base | registry:ui | Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tabs-subtle-base.json` |
| switch | registry:ui | Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/switch.json` |
| switch-base | registry:ui | Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/switch-base.json` |
| table | registry:ui | Animated table with fluid hover row highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell sub-componen… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/table.json` |
| card | registry:ui | shadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with the Fluid Functionalism layer: transparent… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/card.json` |
| sidebar | registry:ui | Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard shortcut, and fluid-hov… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar.json` |
| sidebar-base | registry:ui | Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard shortcut, and fluid-hov… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-base.json` |
| sidebar-menu-grid | registry:lib | Shared popup geometry for sidebar-anchored dropdown menus: trigger width +10px shifted -4px, items on the rows' leading and text axes, trailing glyphs on the t… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-menu-grid.json` |
| sidebar-workspace-header | registry:block | Workspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis, trigger cross-fading into the tile's slot whi… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-workspace-header.json` |
| sidebar-user-footer | registry:block | Footer identity row: a 20px avatar centred on the rows' leading icon axis, chevron on the trailing action axis, and an upward user menu on the shared sidebar g… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-user-footer.json` |
| sidebar-search-field | registry:block | Header search on the menu rows' rhythm: leading icon on the rows' 16px axis, text on the 32px axis, and a hover-revealed keystroke chip at the trailing edge. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-search-field.json` |
| sidebar-inset-topbar | registry:block | The main region's topbar: h-12 with the trigger that hides while the rail peeks and fades back in at its settled spot after a pin. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-inset-topbar.json` |
| sidebar-app | registry:block | A complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed shortcut chip, collapsible sections with… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/sidebar-app.json` |
| dialog-sidebar | registry:block | A settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling panel of controls — switches, selects, a… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dialog-sidebar.json` |
| slider | registry:ui | Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/slider.json` |
| slider-base | registry:ui | Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/slider-base.json` |
| tabs | registry:ui | Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Built on Radix UI Tabs. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tabs.json` |
| tabs-base | registry:ui | Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tabs-base.json` |
| thinking-indicator | registry:ui | Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/thinking-indicator.json` |
| scroll-area | registry:ui | 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… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/scroll-area.json` |
| scroll-area-base | registry:ui | 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… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/scroll-area-base.json` |
| select | registry:ui | Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Radix flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/select.json` |
| select-base | registry:ui | Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/select-base.json` |
| combobox | registry:ui | Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you type, with keyboard hi… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/combobox.json` |
| combobox-base | registry:ui | Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you type, with keyboard hi… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/combobox-base.json` |
| command-menu | registry:ui | Search field over a list of actions: type to filter, arrows to move the fluid hover highlight, Enter to run. Grouped rows with icons, descriptions, and shortcu… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/command-menu.json` |
| tooltip | registry:ui | Floating tooltip with spring-based animations, configurable placement, and rich content support. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tooltip.json` |
| tooltip-base | registry:ui | Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/tooltip-base.json` |
| thinking-steps | registry:ui | Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/thinking-steps.json` |
| thinking-steps-base | registry:ui | Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/thinking-steps-base.json` |
| color-picker | registry:ui | 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 … | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/color-picker.json` |

## For AI agents

```text
You are adding components from @fluid to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/fluid.md) for the component list.
2. Fetch the machine-readable index: https://www.fluidfunctionalism.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: fluid).
```