mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 14:08:47 +00:00
107 lines
2.8 KiB
Plaintext
107 lines
2.8 KiB
Plaintext
---
|
|
title: Your project is ready!
|
|
description: You've created a new project with shadcn/ui.
|
|
---
|
|
|
|
Here's a few things you can do to get started building with shadcn/ui.
|
|
|
|
## Add Components
|
|
|
|
Use the CLI to add components to your project.
|
|
|
|
```bash
|
|
npx shadcn@latest add button
|
|
```
|
|
|
|
Then import and use it in your code.
|
|
|
|
```tsx title="app/page.tsx"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export default function Home() {
|
|
return <Button>Click me</Button>
|
|
}
|
|
```
|
|
|
|
Unlike traditional component libraries, shadcn/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.
|
|
|
|
```bash
|
|
npx shadcn@latest add button card input label
|
|
```
|
|
|
|
```bash
|
|
npx shadcn@latest add --all
|
|
```
|
|
|
|
Browse all components on the [Components](/docs/components) page.
|
|
|
|
## Customize Your Theme
|
|
|
|
You can edit your theme directly in your CSS file. Learn more about [Theming](/docs/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 [ui.shadcn.com](https://ui.shadcn.com) and apply it to your project using a preset code.
|
|
|
|
```bash
|
|
npx shadcn@latest init --preset [CODE]
|
|
```
|
|
|
|
## Add a block
|
|
|
|
You can add a block to your project using the CLI.
|
|
|
|
```bash
|
|
npx shadcn@latest add login-03
|
|
```
|
|
|
|
This will add the `login-03` block to your project. Import and use it in your code.
|
|
|
|
```tsx title="app/page.tsx"
|
|
import { Login03 } from "@/components/login-03"
|
|
|
|
export default function Home() {
|
|
return <Login03 />
|
|
}
|
|
```
|
|
|
|
## Install from Registries
|
|
|
|
shadcn/ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.
|
|
|
|
```bash
|
|
npx shadcn@latest add @[registry]/[name]
|
|
```
|
|
|
|
Browse the [Registry Directory](/docs/directory) for a list of available registries.
|
|
|
|
## Use AI to Build
|
|
|
|
shadcn/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.
|
|
|
|
```bash
|
|
npx skills add shadcn/ui
|
|
```
|
|
|
|
Learn more about [skills](/docs/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.
|
|
|
|
```bash
|
|
npx shadcn@latest mcp init
|
|
```
|
|
|
|
Learn more on the [MCP Server](/docs/mcp) page.
|