Flow UI is divided into two parts to give you maximum flexibility in how you build your project:
- flowui/core: Standalone components that are entirely self-contained. They only require Tailwind CSS and Framer Motion.
- flowui/shadcn: Components built on top of shadcn/ui primitives. These require a shadcn/ui setup.
Choose the installation method that matches the part of Flow UI you want to use:
Installing Core Components
These components don't need shadcn/ui. This is ideal for lightweight projects or when you want to avoid adding the shadcn base.
Install Core Dependencies
Install the required dependencies for animations and styling utilities:
npm install clsx tailwind-merge lucide-reactAdd Utility Function
Ensure you have a lib/utils.ts (or .js) file to handle class merging. This is used by all Flow UI components:
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Copy and Paste
Navigate to any component under the flowui/core section, copy the source code, and paste it into your project (usually under components/flowui/*).
Installing Shadcn Components
These components leverage shadcn/ui registry features for easy installation and dependency management.
Initialize Shadcn UI
If you haven't already, initialize shadcn/ui in your project:
npx shadcn@latest initConfigure Flow UI Registry
Add our registry to your components.json. This allows the shadcn CLI to find and install Flow UI components:
{
"registries": {
"@flowui": "https://flowui-ten.vercel.app/r/{name}.json"
}
}Add Components
Install components directly using the shadcn CLI:
npx shadcn@latest add @flowui/component-name