Dev Design Library

Fluid Functionalism components

Refined UI components with satisfying hover: a shadcn/ui registry where springs make every state change legible.

Components
65
Framework
React
Stack
React, TypeScript, JavaScript, Tailwind
License
MIT
GitHub stars
999
Source
https://github.com/mickadesign/fluid-functionalism
Website
https://fluidfunctionalism.com
Install
npx shadcn@latest add @fluid/{name}

All Fluid Functionalism components

  • Accordion: Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Built on Radix UI…
  • Accordion (Base UI): Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Base UI flavor.
  • Ask User Questions: Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip…
  • Badge: Compact label with solid, dot, and ghost variants, Tailwind color palette, and three sizes.
  • Banner: Status message built from parts (Banner, BannerTitle, BannerDescription, BannerActions, BannerAction): 5 statuses (filled glyphs for info…
  • Breadcrumb: A trail of links to the current page with one fluid hover across every crumb. Steps can lead with an icon, open a Dropdown, or collapse…
  • Button: Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on…
  • Button (Base UI): Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on…
  • Calendar: Month grid on DayPicker v10 for a single day or a range: one fluid hover highlight across one or two months that follows keyboard focus, a…
  • Card: shadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with the Fluid…
  • Carousel Dots: Carousel dots, static or on autoplay: fluid-hover click areas, and a current pill that fills over each slide's duration.
  • Chat Message: A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted…
  • Checkbox: A single checkbox: a hairline square that darkens on hover and a check that draws itself. Pairs with Field. Radix flavor.
  • Checkbox (Base UI): A single checkbox: a hairline square that darkens on hover and a check that draws itself. Pairs with Field. Base UI flavor.
  • Checkbox Group: Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Built on Radix UI Checkbox.
  • Checkbox Group (Base UI): Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Base UI flavor.
  • Color Picker: Color picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on Base UI's Popover…
  • Combobox: Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you…
  • Combobox: Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you…
  • Command Menu: Search field over a list of actions: type to filter, arrows to move the fluid hover highlight, Enter to run. Grouped rows with icons…
  • Data Table: TanStack Table drawn with the library's Table: the fluid hover row highlight plus resizable, draggable columns, sorting headers with an…
  • Date Picker: Field or ghost trigger for a date, a range, or a date and a time: a calendar popover that opens on the selected day, optional range…
  • Date Picker: Field or ghost trigger for a date, a range, or a date and a time: a calendar popover that opens on the selected day, optional range…
  • Dialog: Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such…
  • Dialog (Base UI): Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such…
  • Settings Dialog (Sidebar in a Dialog): 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…
  • Dropdown: Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead…
  • Dropdown: Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead…
  • Field: Compose a label, a control, helper text, and a validation message into one accessible field: fieldsets, legends, groups, separators, and…
  • File Thumbnail: Read-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner shows while either…
  • Input: Single-line text field drawn like the Select trigger: a fixed hairline, a hover fill, and a neutral focus border; file inputs get an icon…
  • Input Copy: Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.
  • Input Group: Grouped input fields with fluid hover highlighting, animated label transitions, optional icons, and error states.
  • Input Message: Chat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible left/right action…
  • Mobile Drawer: Slide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor.
  • Mobile Drawer: Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.
  • Queued message stack: Sonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a gutter arrow counts…
  • Radio Group: Animated radio group with fluid hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index…
  • Radio Group (Base UI): Animated radio group with fluid hover, spring-animated selection dot. Base UI flavor.
  • Scroll Area: Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native…
  • Scroll Area (Base UI): Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native…
  • Select: Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Radix…
  • Select: Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Base UI…
  • Sidebar: Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard…
  • App Sidebar: A complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed shortcut chip…
  • Sidebar: Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard…
  • Sidebar Inset Topbar: 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.
  • Sidebar Search Field: 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…
  • Sidebar User Footer: 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…
  • Sidebar Workspace Header: Workspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis, trigger cross-fading…
  • Slider: Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.
  • Slider (Base UI): Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.
  • Switch: Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.
  • Switch (Base UI): Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.
  • Table: Animated table with fluid hover row highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and…
  • Tabs: Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.
  • Tabs: Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.
  • Tabs Subtle: Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.
  • Tabs Subtle: Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.
  • Textarea: Multi-line text field with the Input's hairline that grows with its content. Pairs with Field.
  • Thinking Indicator: Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status…
  • Thinking Steps: Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.
  • Thinking Steps: Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.
  • Tooltip: Floating tooltip with spring-based animations, configurable placement, and rich content support.
  • Tooltip (Base UI): Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.

Browse by category