diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx index 1062dd1805..bfa001fac3 100644 --- a/apps/v4/components/docs-sidebar.tsx +++ b/apps/v4/components/docs-sidebar.tsx @@ -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, diff --git a/apps/v4/content/docs/(root)/meta.json b/apps/v4/content/docs/(root)/meta.json index d5b1f56a05..b0949ac28a 100644 --- a/apps/v4/content/docs/(root)/meta.json +++ b/apps/v4/content/docs/(root)/meta.json @@ -16,6 +16,7 @@ "figma", "[Changelog](/docs/changelog)", "[llms.txt](/llms.txt)", - "legacy" + "legacy", + "new" ] } diff --git a/apps/v4/content/docs/(root)/new.mdx b/apps/v4/content/docs/(root)/new.mdx new file mode 100644 index 0000000000..e6f250bc7d --- /dev/null +++ b/apps/v4/content/docs/(root)/new.mdx @@ -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 +} +``` + +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). diff --git a/apps/v4/next.config.mjs b/apps/v4/next.config.mjs index 91e3047f8a..c02c2f798b 100644 --- a/apps/v4/next.config.mjs +++ b/apps/v4/next.config.mjs @@ -108,6 +108,11 @@ const nextConfig = { destination: "/docs/directory", permanent: false, }, + { + source: "/new", + destination: "/docs/new", + permanent: false, + }, ] }, rewrites() {