Introduction
Flow-Kit is a collection of complete usage patterns, built on top of shadcn/ui.
A state-machine button, a smooth section transition etc. Built for everything from AI interfaces to dense dashboards.
The interactions you've thought about building, but never had time to get right.
Philosophy
Most component libraries focus on structure. We focus on behavior.
We believe an interaction isn't finished just because it works. How something responds, when it responds, and what it communicates while it's mid-transition is part of the design, not an extra step after it. Get that right, and the interface feels correct before the user even knows why.
Copy-paste friendly
Just like shadcn/ui, you own the code. Drop it in and customize it.
Built with Motion
Powered by the industry standard for fluid, physics-based React animations.
Highly Accessible
Animations automatically respect users' prefers-reduced-motion settings.
Why Motion Matters
Most interactions are functional and nothing else. A button clicks, a list updates. Nothing about that is wrong; it's just incomplete.
Every animation is a claim about how something works.
Without motion design
State changes simply replace one another.
With Flow-Kit
Motion connects and clarifies each state.
Click each button to compare the two approaches.
Usage
Copy the code directly, or install via the shadcn CLI. Both options are on every component's page.
Flow-Kit components are built on shadcn/ui, so they slot into your existing setup with no new dependencies or design system to adopt.
Next Steps
Ready to start building? Head over to the installation guide to set up your project.