Repolode
Submit
mickadesign

mickadesign/fluid-functionalism

A shadcn/ui component registry with refined UI components, springy hover transitions, and Radix or Base UI flavors.

View on GitHubWebsite
Stars
1,139
Forks
55
Open issues
19
Last commit
2 days ago

What is it?

Fluid Functionalism is a shadcn/ui registry of UI components, shared interaction systems, and composed blocks. Its transitions are built around springs rather than fixed durations, and each motion is meant to make a state change easier to follow. A single hover highlight glides between items in a list, and font weight changes happen without shifting surrounding layout.

Components that depend on a primitive come in two flavors, Radix and Base UI, with the same API on both. Installation uses the shadcn CLI, either by registry name or by URL, and dependencies resolve automatically. The library also offers a starter command that scaffolds a Next.js app with components preinstalled, and a configurable icon provider that defaults to Lucide but accepts other icon sets.

The project covers a broad set of components including Button, Dialog, Combobox, Calendar, Sidebar, ColorPicker, and ChatMessage, plus systems such as spring motion presets and typography scales. Its docs site also provides Markdown and llms.txt output for AI coding agents.

Key features

  • 01Installable through the shadcn CLI by registry name or URL.
  • 02Radix and Base UI flavors of primitive-based components share one API.
  • 03Spring-based transitions, with a shared hover highlight that glides between list items.
  • 04Inter variable font setup keeps text weight changes from shifting layout.
  • 05Icon slots default to Lucide and can be swapped for other icon sets.

Use cases

  • Building a Next.js or React app on shadcn/ui that needs polished hover and transition behavior.
  • Adding a chat interface with composer, message bubbles, and thinking indicators.
  • Creating app shells with a resizable sidebar, command menu, or settings dialog.
  • Using a project that already runs Base UI or Radix without switching primitives.

Quick start

  1. 1

    Create a new Next.js app with every component installed

    npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json
  2. 2

    Add the Fluid Functionalism registry to an existing project

    npx shadcn@latest registry add @fluid
  3. 3

    Install a component by its registry name

    npx shadcn@latest add @fluid/button

Things to know

  • Components are installed as shadcn/ui source code into your project, not as a versioned package.
  • Existing stock shadcn files with the same names are replaced when using --overwrite.
  • Font weight animations expect Inter loaded with both the wght and opsz axes.

In collections

Frontend frameworks & UI components

Topics

#react#shadcn-ui#tailwind-css#ui-components#animation#design-system#typescript

FAQ

What is fluid-functionalism?
A shadcn/ui component registry with refined UI components, springy hover transitions, and Radix or Base UI flavors. Fluid Functionalism is a shadcn/ui registry of UI components, shared interaction systems, and composed blocks. Its transitions are built around springs rather than fixed durations, and each motion is meant to make a state change easier to follow. A single hover highlight glides between items in a list, and font weight changes happen without shifting surrounding layout.
Is fluid-functionalism free to use? What license does it have?
fluid-functionalism is open source under the MIT license. Check the license terms before using it in commercial products.
Is fluid-functionalism still maintained?
Actively maintained. The last commit to fluid-functionalism was on Nov 6, 2026.
What can I use fluid-functionalism for?
Building a Next.js or React app on shadcn/ui that needs polished hover and transition behavior. Adding a chat interface with composer, message bubbles, and thinking indicators. Creating app shells with a resizable sidebar, command menu, or settings dialog. Using a project that already runs Base UI or Radix without switching primitives.
How do I install fluid-functionalism?
Create a new Next.js app with every component installed: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json Add the Fluid Functionalism registry to an existing project: npx shadcn@latest registry add @fluid Install a component by its registry name: npx shadcn@latest add @fluid/button
Where can I get fluid-functionalism?
The source code and installation instructions are on GitHub: https://github.com/mickadesign/fluid-functionalism

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects