Logo

Installation

How to install and configure Flow UI in your project.

Initialize Shadcn UI

Flow UI acts as a registry extension to Shadcn UI. First, you need to initialize Shadcn UI in your project if you haven't already:

npx shadcn@latest init

Configure Flow UI Registry

Add the Flow UI registry to your components.json file. This allows the CLI to resolve specific @flowui components.

Open components.json and add the @flowui entry to the registries object:

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

Add Components

You can now add components directly using the CLI with the @flowui scope. For example:

npx shadcn@latest add @flowui/component-name

On this page