mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-30 08:04:18 +00:00
feat: add /new page
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"figma",
|
||||
"[Changelog](/docs/changelog)",
|
||||
"[llms.txt](/llms.txt)",
|
||||
"legacy"
|
||||
"legacy",
|
||||
"new"
|
||||
]
|
||||
}
|
||||
|
||||
84
apps/v4/content/docs/(root)/new.mdx
Normal file
84
apps/v4/content/docs/(root)/new.mdx
Normal 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).
|
||||
@@ -108,6 +108,11 @@ const nextConfig = {
|
||||
destination: "/docs/directory",
|
||||
permanent: false,
|
||||
},
|
||||
{
|
||||
source: "/new",
|
||||
destination: "/docs/new",
|
||||
permanent: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
rewrites() {
|
||||
|
||||
Reference in New Issue
Block a user