Your project is ready!

Here are a few things you can do to get started building with openteam-ui.

Add Components

Use the CLI to add components to your project.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add button
Copy

Then import and use it in your code.

Copyimport { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>Click me</Button>
}

Unlike traditional component libraries, openteam-ui adds the component source code directly to your project under components/ui/. You own the code and can customize it however you want.

You can add multiple components at once or add all available components.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add button card input label
Copy

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add --all
Copy

Browse all components on the Components page.

Customize Your Theme

You can edit your theme directly in your CSS file. Learn more about Theming and how to use CSS variables or utility classes.

If you want to try a new preset, you can create a custom theme visually on openteam.ai and apply it to your project using a preset code.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest init --preset [CODE]
Copy

Add a block

You can add a block to your project using the CLI.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add login-03
Copy

This will add the login-03 block to your project. Import and use it in your code.

Copyimport { Login03 } from "@/components/login-03"
 
export default function Home() {
  return <Login03 />
}

Add Admin Pages

The first-wave admin pages are also available as installable blocks for Next.js App Router projects.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add admin-users-01
npx openteam-ui@latest add admin-tasks-01 admin-chats-01
npx openteam-ui@latest add admin-suite-01
Copy

admin-suite-01 installs the shared admin shell plus dashboard, tasks, apps, chats, users, auth, error, and settings pages in UI-demo mode with local state and mock content.

How To Use Them

After installing the admin blocks, start your app and open the generated admin routes:

Copypnpm dev

• Visit /dashboard to enter the admin shell
• Visit /users, /tasks, /apps, and /chats for the main workspace pages
• Visit /settings and the nested /settings/* routes for account preferences
• Visit /sign-in or /sign-up for auth screens

If you installed admin-suite-01, those routes are created for you automatically. If you only installed a single page block such as admin-users-01, only that route and its shared admin components are added.

The fastest way to customize the experience is to edit the files under components/admin/ and the generated route files under app/....

Browse the admin block gallery at /blocks/admin.

Install from Registries

openteam-ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest add @[registry]/[name]
Copy

Browse the Registry Directory for a list of available registries.

Use AI to Build

openteam-ui is designed to work with AI. Your AI assistant can read the component source code in your project, understand the APIs, and compose them together to build pages and features.

Here are some example prompts to try:

• "Create a signup page with a form for entering name, email and password."
• "Create a settings page with a form for updating profile information."
• "Build a dashboard with a header, stats cards, and a data table."

Install the shadcn Skills

Install the shadcn skill in your AI assistant. This will give your AI assistant access to the full component registry, documentation, and search.

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
Copy

Learn more about skills.

Connect the MCP Server

The shadcn MCP server gives your AI assistant access to the full component registry, documentation, and search. Connect it in your editor for the best experience.

pnpmnpmyarnbun
pnpm dlx openteam-ui@latest mcp init
Copy

Learn more on the MCP Server page.