shadcn

Use the openteam-ui CLI to add components to your project.

init

Use the init command to initialize configuration and dependencies for a new project.

The init command installs dependencies, adds the cn util and configures CSS variables for the project.


pnpm dlx openteam-ui@latest init

Options

Usage: openteam-ui init [options] [components...]
 
initialize your project and install dependencies
 
Arguments:
  components              name, url or local path to component
 
Options:
  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
  -b, --base <base>          the component library to use. (radix, base)
  -p, --preset [name]        use a preset configuration. (name, URL, or preset code)
  -n, --name <name>          the name for the new project.
  -d, --defaults             use default configuration. (default: false)
  -y, --yes                  skip confirmation prompt. (default: true)
  -f, --force                force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>            the working directory. defaults to the current directory.
  -s, --silent               mute output. (default: false)
  --monorepo                 scaffold a monorepo project.
  --no-monorepo              skip the monorepo prompt.
  --reinstall                re-install existing UI components.
  --no-reinstall             do not re-install existing UI components.
  --rtl                      enable RTL support.
  --no-rtl                   disable RTL support.
  --css-variables            use css variables for theming. (default: true)
  --no-css-variables         do not use css variables for theming.
  -h, --help                 display help for command

The create command is an alias for init:


pnpm dlx openteam-ui@latest create

add

Use the add command to add components and dependencies to your project.


pnpm dlx openteam-ui@latest add [component]

Options

Usage: openteam-ui add [options] [components...]
 
add a component to your project
 
Arguments:
  components           name, url or local path to component
 
Options:
  -y, --yes            skip confirmation prompt. (default: false)
  -o, --overwrite      overwrite existing files. (default: false)
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -a, --all            add all available components (default: false)
  -p, --path <path>    the path to add the component to.
  -s, --silent         mute output. (default: false)
  --dry-run            preview changes without writing files. (default: false)
  --diff [path]        show diff for a file.
  --view [path]        show file contents.
  -h, --help           display help for command

Add Admin Pages

The first-wave admin experience is available as installable registry blocks for Next.js App Router projects.

If you installed the CLI globally on a server, replace npx openteam-ui@latest with openteam-ui.

Start with the shared shell and a few page blocks:


pnpm dlx openteam-ui@latest init
npx openteam-ui@latest add admin-sidebar-01 admin-account-dropdown-01
npx openteam-ui@latest add admin-users-01 admin-tasks-01 admin-chats-01

Or install the full first-wave admin starter set in one step:


pnpm dlx openteam-ui@latest add admin-suite-01

admin-suite-01 installs the shared admin shell plus dashboard, tasks, apps, chats, users, auth, error, and settings pages. These admin blocks ship in UI-demo mode with local state and mock content, so you can adapt them before connecting real backend services.

Use Installed Admin Pages

Once the files are added, start your Next.js app and open the generated routes:

pnpm dev

Open /dashboard for the main admin home
Open /tasks, /apps, /chats, and /users for the core workspace pages
Open /sign-in, /sign-up, /forgot-password, and /otp for auth flows
Open /errors/unauthorized, /errors/forbidden, /errors/not-found, /errors/internal-server-error, and /errors/maintenance-error for error states
Open /settings, /settings/account, /settings/appearance, /settings/notifications, and /settings/display for settings flows

How the admin items install:

admin-users-01, admin-tasks-01, admin-chats-01, and similar page blocks create route files directly under app/.../page.tsx
admin-sidebar-01 and admin-account-dropdown-01 install reusable shell pieces under components/admin/...
admin-suite-01 installs the whole route set plus the shared admin components in one pass

The most common files to customize after installation are:

components/admin/app-sidebar.tsx
components/admin/account-dropdown.tsx
components/admin/page-shell.tsx
components/admin/tasks-table.tsx
components/admin/users-table.tsx
the generated route files under app/dashboard, app/tasks, app/apps, app/chats, app/users, app/errors, and app/settings

Because the source code lives directly in your project, you can hand the files to Codex or another coding agent and ask it to adapt the copy, data model, routes, or shell for your product.

You can inspect the available admin items before installing them:


pnpm dlx openteam-ui@latest search @openteam-ui -q admin
npx openteam-ui@latest view admin-suite-01

You can also browse the live gallery at /blocks/admin.

view

Use the view command to view items from the registry before installing them.


pnpm dlx openteam-ui@latest view [item]

You can view multiple items at once:


pnpm dlx openteam-ui@latest view button card dialog

Or view items from namespaced registries:


pnpm dlx openteam-ui@latest view @acme/auth @v0/dashboard

Options

Usage: openteam-ui view [options] <items...>
 
view items from the registry
 
Arguments:
  items            the item names or URLs to view
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

search

Use the search command to search for items from registries.


pnpm dlx openteam-ui@latest search [registry]

You can search with a query:


pnpm dlx openteam-ui@latest search @openteam-ui -q "button"

Or search multiple registries at once:


pnpm dlx openteam-ui@latest search @openteam-ui @v0 @acme

The list command is an alias for search:


pnpm dlx openteam-ui@latest list @acme

Options

Usage: openteam-ui search|list [options] <registries...>
 
search items from registries
 
Arguments:
  registries             the registry names or urls to search items from. Names
                         must be prefixed with @.
 
Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -q, --query <query>    query string
  -l, --limit <number>   maximum number of items to display per registry (default: "100")
  -o, --offset <number>  number of items to skip (default: "0")
  -h, --help             display help for command

build

Use the build command to generate the registry JSON files.


pnpm dlx openteam-ui@latest build

This command reads the registry.json file and generates the registry JSON files in the public/r directory.

Options

Usage: openteam-ui build [options] [registry]
 
build components for a shadcn registry
 
Arguments:
  registry             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -h, --help           display help for command

To customize the output directory, use the --output option.


pnpm dlx openteam-ui@latest build --output ./public/registry

docs

Use the docs command to fetch documentation and API references for components.


pnpm dlx openteam-ui@latest docs [component]

Options

Usage: openteam-ui docs [options] [component]
 
fetch documentation and API references for components
 
Arguments:
  component          the component to get docs for
 
Options:
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -b, --base <base>  the base to use either 'base' or 'radix'. defaults to project base.
  --json             output as JSON. (default: false)
  -h, --help         display help for command

info

Use the info command to get information about your project.


pnpm dlx openteam-ui@latest info

Options

Usage: openteam-ui info [options]
 
get information about your project
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  --json            output as JSON. (default: false)
  -h, --help        display help for command

migrate

Use the migrate command to run migrations on your project.


pnpm dlx openteam-ui@latest migrate [migration]

Available Migrations

Migration	Description
`icons`	Migrate your UI components to a different icon library.
`radix`	Migrate to radix-ui.
`rtl`	Migrate your components to support RTL (right-to-left).

Options

Usage: openteam-ui migrate [options] [migration] [path]
 
run a migration.
 
Arguments:
  migration        the migration to run.
  path             optional path or glob pattern to migrate.
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -l, --list       list all migrations. (default: false)
  -y, --yes        skip confirmation prompt. (default: false)
  -h, --help       display help for command

migrate rtl

The rtl migration transforms your components to support RTL (right-to-left) languages.


pnpm dlx openteam-ui@latest migrate rtl

This will:

Update components.json to set rtl: true
Transform physical CSS properties to logical equivalents (e.g., ml-4 → ms-4, text-left → text-start)
Add rtl: variants where needed (e.g., space-x-4 → space-x-4 rtl:space-x-reverse)

Migrate specific files

You can migrate specific files or use glob patterns:

# Migrate a specific file
npx openteam-ui@latest migrate rtl src/components/ui/button.tsx
 
# Migrate files matching a glob pattern
npx openteam-ui@latest migrate rtl "src/components/ui/**"

If no path is provided, the migration will transform all files in your ui directory (from components.json).

migrate radix

The radix migration updates your imports from individual @radix-ui/react-* packages to the unified radix-ui package.


pnpm dlx openteam-ui@latest migrate radix

This will:

Transform imports from @radix-ui/react-* to radix-ui
Add the radix-ui package to your package.json

Before

import * as DialogPrimitive from "@radix-ui/react-dialog"
import * as SelectPrimitive from "@radix-ui/react-select"

After

import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"

Migrate specific files

You can migrate specific files or use glob patterns:

# Migrate a specific file.
npx openteam-ui@latest migrate radix src/components/ui/dialog.tsx
 
# Migrate files matching a glob pattern.
npx openteam-ui@latest migrate radix "src/components/ui/**"

If no path is provided, the migration will transform all files in your ui directory (from components.json).

Once complete, you can remove any unused @radix-ui/react-* packages from your package.json.

RTL Monorepo

On This Page

init add Add Admin Pages Use Installed Admin Pages view search build docs info migrate migrate rtl migrate radix

Deploy your openteam.ai app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.