Fluid Functionalism

Refined UI components with satisfying hover. Built on and Radix primitives — every transition exists to make a state change legible.

|

Install

Add the registry to your project:

bash
npx shadcn@latest registry add @fluid

Then install any component:

bash
npx shadcn@latest add @fluid/button

Or install directly without adding the registry:

bash
npx shadcn@latest add https://www.fluidfunctionalism.com/r/button.json

Dependencies resolve automatically. Font weight animations require the variable font.

Icons

Components render icons through named slots with defaults — lucide-react is the only icon dependency an install adds. To use another icon library, wrap your app in the installed IconProvider and override any slot; names you leave out keep their Lucide default:

tsx
import { IconProvider } from "@/lib/icon-context";import { CaretRight, MagnifyingGlass } from "@phosphor-icons/react";
<IconProvider icons={{ "chevron-right": CaretRight, "search": MagnifyingGlass }}>  <App /></IconProvider>

The icon-library switcher on the docs site is a preview tool only — none of that machinery ships with installed components.

Components

ComponentDescription
Collapsible sections with animated expand/collapse and proximity hover
Stepped question flow with single/multi-select, inline "other" input, and multi-question navigation
Compact label with solid and dot variants, Tailwind color palette
Variants, sizes, loading state, and icon support
One prop-driven card — stacked, inline, or grid layouts, borderless dividers, media/logo/feature slots, and 2-D proximity hover
Merged backgrounds for contiguous selections
HEX, RGB, HSL, and OKLCH formats with alpha, swatches, and eyedropper; inline or popover
Modal with smooth enter/exit animations and overlay
Menu-style dropdown with proximity hover
Read-only input with copy-to-clipboard and animated feedback
Input fields with proximity hover and validation
Chat-style composer with auto-resizing textarea, action slots, and built-in send button
Radio buttons with proximity hover and animated selection
Animated select with bordered/borderless variants
Range slider with step snapping, range mode, animated thumb
Eight nesting elevation levels so popovers, dropdowns, and dialogs stay visible at any depth
Toggle with animated thumb and label
Data table with row hover effects
Segmented control with sliding indicator and proximity hover
Tab navigation with smooth pill animations
Animated status indicator with morphing SVG
Chain-of-thought display with sequential animation
Spring-based floating tooltip with configurable placement

What makes these different

  • Motion as information — transitions make state changes legible, nothing moves for decoration
  • Hover as preview — proximity highlights show where your action will land before you click
  • Spring physics — springs replace fixed durations, adapting naturally to interruption
  • Drop-in compatible — your existing shadcn theme and tokens apply automatically

Tech stack

  • 15 + React 19
  • v4
  • primitives
  • registry protocol

License

MIT [blocked] © Micka Touillaud