feat: add /new page

This commit is contained in:
shadcn
2026-02-26 13:12:53 +04:00
parent 9546f3ad1e
commit d24d2e6fd0
4 changed files with 92 additions and 2 deletions

View File

@@ -54,7 +54,7 @@ const TOP_LEVEL_SECTIONS = [
},
]
const EXCLUDED_SECTIONS = ["installation", "dark-mode", "changelog", "rtl"]
const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl"]
const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl", "/docs/new"]
export function DocsSidebar({
tree,

View File

@@ -16,6 +16,7 @@
"figma",
"[Changelog](/docs/changelog)",
"[llms.txt](/llms.txt)",
"legacy"
"legacy",
"new"
]
}

View File

@@ -0,0 +1,84 @@
---
title: Your project is ready!
description: You've created a new project with shadcn/ui. Here's what to do next.
---
Here are the next steps to start building.
## 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 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 a2r6bw
```
You can also edit your theme directly in your CSS file. Learn more about [Theming](/docs/theming).
## Configure Your Project
Your project settings are stored in `components.json`. You can change import aliases, the icon library, or switch between base primitives.
Learn more about [components.json](/docs/components-json).
## 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.
## 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 settings page with a form for updating profile information."_
- _"Add a sidebar navigation with collapsible groups."_
- _"Build a dashboard with a header, stats cards, and a data table."_
## 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 https://example.com/r/my-component.json
```
Browse registries on the [Directory](/docs/directory) page. You can also [build and publish your own registry](/docs/registry).

View File

@@ -108,6 +108,11 @@ const nextConfig = {
destination: "/docs/directory",
permanent: false,
},
{
source: "/new",
destination: "/docs/new",
permanent: false,
},
]
},
rewrites() {