---
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", "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: 53
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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 (53)

| 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` |
| 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` |
| 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` |
| 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-proximity-hover | registry:hook | React hook for proximity-based hover detection. Tracks the closest item to the mouse cursor within a container, enabling smooth animated background indicators. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/use-proximity-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-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 proximity 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 proximity 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, proximity-based hover,… | `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 proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-sel… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dropdown.json` |
| dropdown-base | registry:ui | Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-sel… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/dropdown-base.json` |
| checkbox-group | registry:ui | Animated checkbox group with proximity 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 proximity 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 proximity hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index and value-based API… | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/radio-group.json` |
| radio-group-base | registry:ui | Animated radio group with proximity 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. Built on Radix UI Dialog with overlay, header, footer, title, and description sub-compon… | `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. Base UI flavor. | `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 proximity-based 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` |
| 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 proximity 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 proximity 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 proximity-based row hover highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell su… | `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` |
| 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, proximity 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, proximity 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, proximity 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, proximity hover, spring-animated popover, and animated checkmark. Base UI flavor. | `npx shadcn@latest add https://www.fluidfunctionalism.com/r/select-base.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).
```