sh4dcn
Registries
ActiveFeaturedAI/chat UI561

@fluid

AI/chat UI · MIT · data updated 2026-07-28

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
aestheticaianimationbuttonscardsformshooksiconsmediamobilenavigationoverlaystables

Install

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

Health

StatusActive
Last commit3 weeks ago
LicenseMIT
Open issues8
ArchivedNo
Stars561

Components (53)

surfacesutilsspringsfont-weightsurface-contextsurface-classeselevatedshape-contexticon-contextuse-proximity-hoveruse-touch-primaryuse-merge-splitaccordionaccordion-baseask-user-questionsbadgebuttonbutton-basedropdowndropdown-basecheckbox-groupcheckbox-group-baseradio-groupradio-group-basedialogdialog-basemobile-drawermobile-drawer-baseinput-copyinput-groupinput-messagefile-thumbnailchat-messagetabs-subtletabs-subtle-baseswitchswitch-basetablecardsliderslider-basetabstabs-basethinking-indicatorscroll-areascroll-area-baseselectselect-basetooltiptooltip-basethinking-stepsthinking-steps-basecolor-picker
Components: surfaces, utils, springs, font-weight, surface-context, surface-classes, elevated, shape-context, icon-context, use-proximity-hover, use-touch-primary, use-merge-split, accordion, accordion-base, ask-user-questions, badge, button, button-base, dropdown, dropdown-base, checkbox-group, checkbox-group-base, radio-group, radio-group-base, dialog, dialog-base, mobile-drawer, mobile-drawer-base, input-copy, input-group, input-message, file-thumbnail, chat-message, tabs-subtle, tabs-subtle-base, switch, switch-base, table, card, slider, slider-base, tabs, tabs-base, thinking-indicator, scroll-area, scroll-area-base, select, select-base, tooltip, tooltip-base, thinking-steps, thinking-steps-base, 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