Source from repo

shadcn/ui Component Patterns

Build React UIs using shadcn/ui components with Tailwind CSS, Radix primitives, and proper accessibility patterns.

giuseppe-trisciuoglioGitHub giuseppe-trisciuoglioSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

164.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/nextjs-integration.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown162 linesFree

references/nextjs-integration.md

1# shadcn/ui - Next.js Integration
2 
3## App Router Setup
4 
5Most shadcn/ui components require `"use client"` directive when used with App Router. Static display components (Card, Table) can work in Server Components without the directive.
6 
7```tsx
8// src/components/ui/button.tsx — already includes "use client" after npx shadcn@latest add button
9"use client"
10import * as React from "react"
11// ... rest of component
12```
13 
14## Root Layout with Toaster
15 
16```tsx
17// app/layout.tsx
18import { Inter } from "next/font/google"
19import { Toaster } from "@/components/ui/toaster"
20import { cn } from "@/lib/utils"
21import "./globals.css"
22 
23const inter = Inter({ subsets: ["latin"] })
24 
25export default function RootLayout({ children }: { children: React.ReactNode }) {
26  return (
27    <html lang="en" suppressHydrationWarning>
28      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
29        {children}
30        <Toaster />
31      </body>
32    </html>
33  )
34}
35```
36 
37## Server Components with Interactive Elements
38 
39When using interactive shadcn/ui components in Server Components, wrap them in a Client Component:
40 
41```tsx
42// app/dashboard/page.tsx — Server Component
43import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
44import { ButtonClient } from "@/components/button-client"
45 
46export default function DashboardPage() {
47  return (
48    <div className="container mx-auto p-6">
49      <Card>
50        <CardHeader>
51          <CardTitle>Dashboard</CardTitle>
52        </CardHeader>
53        <CardContent>
54          <ButtonClient>Interactive Button</ButtonClient>
55        </CardContent>
56      </Card>
57    </div>
58  )
59}
60```
61 
62```tsx
63// src/components/button-client.tsx — Client Component wrapper
64"use client"
65import { Button } from "@/components/ui/button"
66 
67export function ButtonClient(props: React.ComponentProps<typeof Button>) {
68  return <Button {...props} />
69}
70```
71 
72## Metadata with shadcn/ui Pages
73 
74```tsx
75// app/layout.tsx
76import { Metadata } from "next"
77 
78export const metadata: Metadata = {
79  title: { default: "My App", template: "%s | My App" },
80  description: "Built with shadcn/ui and Next.js",
81}
82```
83 
84```tsx
85// app/about/page.tsx
86import { Metadata } from "next"
87import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
88 
89export const metadata: Metadata = {
90  title: "About Us",
91  description: "Learn more about our company",
92}
93 
94export default function AboutPage() {
95  return (
96    <div className="container mx-auto py-8">
97      <Card>
98        <CardHeader><CardTitle>About Our Company</CardTitle></CardHeader>
99        <CardContent>
100          <p>We build amazing products with modern web technologies.</p>
101        </CardContent>
102      </Card>
103    </div>
104  )
105}
106```
107 
108## Dark Mode Setup
109 
110### With next-themes
111 
112```bash
113npm install next-themes
114```
115 
116```tsx
117// components/theme-provider.tsx
118"use client"
119import { ThemeProvider as NextThemesProvider } from "next-themes"
120 
121export function ThemeProvider({ children, ...props }) {
122  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
123}
124```
125 
126```tsx
127// app/layout.tsx
128import { ThemeProvider } from "@/components/theme-provider"
129 
130export default function RootLayout({ children }) {
131  return (
132    <html lang="en" suppressHydrationWarning>
133      <body>
134        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
135          {children}
136        </ThemeProvider>
137      </body>
138    </html>
139  )
140}
141```
142 
143### Theme Toggle Component
144 
145```tsx
146"use client"
147import { useTheme } from "next-themes"
148import { Button } from "@/components/ui/button"
149import { Moon, Sun } from "lucide-react"
150 
151export function ThemeToggle() {
152  const { theme, setTheme } = useTheme()
153  return (
154    <Button variant="ghost" size="icon"
155      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
156      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
157      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
158    </Button>
159  )
160}
161```
162

Preparing the source view

shadcn/ui Component Patterns

references/nextjs-integration.md