Creating a New Next.js Project with All Shadcn/UI Components

Initial Setup

Create a new Next.js project

npx create-next-app@latest my-shadcn-app

Setup Questions

• Would you like to use TypeScript? Yes
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? Yes
• Would you like to use the src/ directory? Yes
• Would you like to use App Router? Yes
• Would you like to customize the default import alias? No

Navigate to your project directory

cd my-shadcn-app

Installing Shadcn/UI

Initialize Shadcn/UI

npx shadcn@latest init

Configuration Options

• Style: Default
• Base color: Slate
• Global CSS file: app/globals.css
• Use CSS variables: Yes
• Custom tailwind prefix: No
• Tailwind config location: tailwind.config.js
• Import alias for components: @/components
• Import alias for utils: @/lib/utils
• Using React Server Components: Yes
• Write configuration to components.json: Yes

Install all components at once

npx shadcn@latest add --all

Running Your Project

Start the development server

npm run dev

Your project is now running at http://localhost:3000

Usage Example

Basic button component

// app/page.js
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-8">My Shadcn/UI App</h1>
      <Button>Click me</Button>
    </main>
  )
}

Available Components

Shadcn/UI provides a rich set of components including:

• Layout: Card, Sheet, Drawer
• Data Display: Table, Avatar, Badge
• Form: Input, Select, Checkbox, Radio
• Feedback: Alert, Toast, Progress
• Navigation: Tabs, Breadcrumb, Pagination
• Overlays: Dialog, Dropdown Menu, Tooltip

Next Steps

Customizing components

All components are installed in your components/ui directory where you can customize them to match your design requirements.

Building your UI

Start composing these components to create beautiful, accessible user interfaces with minimal effort.