Skip to content
Index730 resources
Fluid Functionalism

Fluid Functionalism

shadcn registry of 23 components where motion carries state, not decoration

Tier A · StrongRegistryComponent LibraryAnimation Libraryfluidfunctionalism.com

(Visit fluidfunctionalism.com ↗)(Docs)(Repository)(Registry)
Preview image from fluidfunctionalism.com

An MIT-licensed shadcn registry by Micka (@micka_design) built on the premise that every animation should communicate something — spring physics on state changes, proximity hover, font-weight interpolation, merge/split transitions. It ships 23 documented components (Accordion, AskUserQuestions, Badge, Button, Card, ChatMessage, CheckboxGroup, ColorPicker, Dialog, Dropdown, InputCopy, InputGroup, InputMessage, RadioGroup, Select, Slider, Switch, Table, Tabs, TabsSubtle, ThinkingIndicator, ThinkingSteps, Tooltip), four system docs (Motion, Scrollbars, Sizes, Surfaces), plus hooks (use-proximity-hover, use-touch-primary, use-merge-split) and a surfaces theme. Most components ship as a paired unstyled `-base` and a styled variant, so you can take the behavior without the look.

Install
npx shadcn@latest registry add @fluid

For an agent

Install it alongside shadcn/ui rather than instead of it — it is a shadcn registry (`npx shadcn@latest registry add @fluid`, then `npx shadcn@latest add @fluid/button`), so it drops into the same components directory and shares the same CSS-variable theme. Pull individual pieces when the interaction is the point: ThinkingIndicator, ThinkingSteps, ChatMessage and AskUserQuestions are a ready-made AI-chat surface, and the `-base` variants let you take spring behavior onto your own markup. Two things to watch: font-weight animation needs the Inter variable font loaded or it silently does nothing, and every component carries client-side motion, so keep it out of server components and off pages where you care about reduced-motion defaults you have not audited.

Why it is here. A rare registry with an actual thesis — motion as information — and it is one of the few third-party shadcn registries that ships credible AI-agent chat components.

Install command, framework, licence and component list.

Facts

License
MIT
Pricing
Free, Open source
Framework
React, Next.js
Styling
Tailwind CSS, CSS custom properties
Distribution
shadcn registry, CLI installer, Copy-paste snippet, GitHub repository
Platform
Web
Content type
Code
Agent readiness
Machine-readable registry item, CLI installable, Copy-paste ready code, Readable open source
Accessibility
Built on accessible primitives
Maturity
Actively maintained
GitHub stars
754

Components it ships

23 total
AccordionBadgeButtonCardCheckbox GroupRadio GroupDialogDrawerDropdown MenuColor PickerCopy ButtonInput GroupValidation MessageSelectSliderSwitchTableTabsTooltipScroll AreaFile CardMessageReasoningPlanApproval RequestHover Effect

Helps you build

6
AI Chat PanelAI Action ApprovalSettings Web AppSubmitting A FormShowing Input ErrorUploading Media

Notable for

  • 23 components, MIT, 754 stars
  • paired `-base` unstyled variants for every interactive component
  • ThinkingIndicator / ThinkingSteps / AskUserQuestions for agent UIs
  • proximity-hover and merge/split hooks
  • public /r/registry.json

Provenance

Verified 2026-08-15. HTTP 200. https://www.fluidfunctionalism.com/, https://www.fluidfunctionalism.com/docs, https://www.fluidfunctionalism.com/r/registry.json (53 registry items enumerated), GitHub API repos/mickadesign/fluid-functionalism (754 stars, MIT, pushed 2026-08-12)

Also in Component Libraries

6
fluidfunctionalism.comTier A