Introduction
Welcome to Flow-Kit.
Flow-Kit is a collection of high-quality, animated components built on top of shadcn/ui.
While shadcn/ui provides the robust, accessible primitives (buttons, inputs, dialogs), Flow-Kit focuses on the interactions—the subtle details, micro-animations, and physics-based transitions that make an interface feel alive.
Philosophy
Most component libraries focus on structure. We focus on feeling.
We believe that animation shouldn't be an afterthought or a "nice-to-have." It is a core part of the user experience that guides attention, provides feedback, and creates a sense of spatial consistency.
Flow-Kit is:
- Copy-paste friendly: Just like shadcn/ui, you own the code.
- Built on Framer Motion: The industry standard for React animation.
- Accessible: Animations respect
prefers-reduced-motion.
Why Motion?
In modern web development, we often stop at "functional." A button clicks, a modal opens, a list renders.
But software is more than functionality; it is an experience. Motion acts as the connective tissue between states:
- Context: Where did this element come from?
- Feedback: Did my action succeed?
- Delight: Does using this tool feel good?
This library aims to bridge the gap between a static design system and a fluid user experience.
Usage
Flow-Kit is not a dependency you install. It is a reference you copy from.
We take standard shadcn components and wrap them with meaningful interactions. You don't need to rebuild your design system; you just upgrade the parts that need to pop.
Next Steps
Ready to start building? Head over to the installation guide to set up your project.