Flow UI

Beautifully designed, copy-paste components for your next project.

FlowUI is a developer-focused UI component collection built with modern tools like shadcn/ui, Framer Motion, and Tailwind — designed to improve your development flow.

---

---

✨ Features

• Built for Real Projects: Components you actually build in almost every project — not just another button and card collection.

• Developer Flow First: Designed to reduce repetitive UI work and keep you focused on shipping, not rebuilding patterns.

• Motion with Purpose: Thoughtful animations powered by Framer Motion that enhance usability without distraction.

• Copy, Customize, Own: Fully copy-paste components — no lock-in, no hidden abstractions.

• Modern by Design: Crafted with Tailwind CSS, shadcn-inspired patterns, and clean React architecture for flexibility and control.

🚀 Quick Start

Flow UI acts as a registry extension to Shadcn UI.

Soon, will apply for the registry on Shadcn and then this steps will be gone. But till then, follow this steps, only if you want to use the components from flowui/shadcn.

Note: To use the components from flowui/core, you don't need to follow this installation.

1. Initialize Shadcn UI

If you haven't already, initialize Shadcn UI in your project:

npx shadcn@latest init

2. Configure Registry

Add the Flow UI registry to your components.json:

{
  "registries": {
    "@flowui": "https://flowui-registry.vercel.app/r/{name}.json"
  }
}

3. Add Components

Install any component directly via CLI:

npx shadcn@latest add @flowui/copy-button

📦 Components

Standard Components	Animated Components	Blocks
Auth Buttons	Changing Text	File Select
Copy Button	Scrollbar
Lift Button
Speaker
Text Divider

🛠 Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS v4
• Primitives: Radix UI
• Animations: Motion
• Docs: FumaDocs

📄 License

Licensed under the MIT License.

---

Built with ❤️ by KushalXCoder