sh4dcn
Registries
ActiveFeaturedAI/chat UI1,104

@fluid

AI/chat UI · MIT · data updated 2026-10-27

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.

WebsiteDocsGitHubComponents folderAgent brief (.md)
@fluid preview
aestheticaianimationbuttonscardschartsdashboardformshooksiconsmediamobilenavigationoverlaystables

Install

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

Health

StatusActive
Last committoday
LicenseMIT
Open issues20
ArchivedNo
Stars1,104

Components (84)

surfacestokenstype-scaletypographyutilsspringsfont-weightsurface-contextsurface-classeselevatedpopupomitshape-contextsize-contexticon-contexticons-tablericons-phosphoricons-hugeiconsicons-untitleduifluid-provideruse-fluid-hoveruse-touch-primaryuse-keyboard-nav-gateuse-merge-splitaccordionbase/accordionask-user-questionsbadgebannerbuttonbase/buttondropdownbase/dropdowncheckbox-groupbase/checkbox-groupradio-groupbase/radio-groupdialogbase/dialogmobile-drawerbase/mobile-drawerinput-copyinput-groupinput-messagefile-thumbnailqueued-stackchat-messagetabs-subtlebase/tabs-subtleswitchbase/switchcarousel-dotstablecardsidebarbase/sidebarsidebar-menu-gridsidebar-workspace-headersidebar-user-footersidebar-search-field
Components: surfaces, tokens, type-scale, typography, utils, springs, font-weight, surface-context, surface-classes, elevated, popup, omit, shape-context, size-context, icon-context, icons-tabler, icons-phosphor, icons-hugeicons, icons-untitledui, fluid-provider, use-fluid-hover, use-touch-primary, use-keyboard-nav-gate, use-merge-split, accordion, base/accordion, ask-user-questions, badge, banner, button, base/button, dropdown, base/dropdown, checkbox-group, base/checkbox-group, radio-group, base/radio-group, dialog, base/dialog, mobile-drawer, base/mobile-drawer, input-copy, input-group, input-message, file-thumbnail, queued-stack, chat-message, tabs-subtle, base/tabs-subtle, switch, base/switch, carousel-dots, table, card, sidebar, base/sidebar, sidebar-menu-grid, sidebar-workspace-header, sidebar-user-footer, sidebar-search-field, sidebar-inset-topbar, sidebar-app, dialog-sidebar, slider, base/slider, tabs, base/tabs, thinking-indicator, reveal, scroll-area, base/scroll-area, select, base/select, combobox, base/combobox, command-menu, calendar, date-picker, base/date-picker, tooltip, base/tooltip, thinking-steps, base/thinking-steps, color-picker

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@fluid · surfaces

npx shadcn@latest add https://www.fluidfunctionalism.com/r/surfaces.json
View source