--- title: "shadcn\/ui Skills for Next.js 16" description: "Installation, components, blocks, forms, theming, and MCP guidance for shadcn\/ui in modern Next.js projects using pnpm" keywords: ["shadcn", "ui", "Next.js", "pnpm", "blocks", "sonner", "forms", "dark-mode", "mcp"] --- # shadcn\/ui Skills **Status:** Next.js 16 ready **Package Manager:** pnpm (required) **Official Docs:** - [Installation (Next.js)](https:\/\/ui.shadcn.com\/docs\/installation\/next) - [Components](https:\/\/ui.shadcn.com\/docs\/components) - [Blocks](https:\/\/ui.shadcn.com\/blocks) - [Sonner (toast replacement)](https:\/\/ui.shadcn.com\/docs\/components\/sonner) - [Forms](https:\/\/ui.shadcn.com\/docs\/components\/form) - [Dark Mode (Next.js)](https:\/\/ui.shadcn.com\/docs\/dark-mode\/next) - [MCP Server](https:\/\/ui.shadcn.com\/docs\/mcp) - [LLM Guidelines](https:\/\/ui.shadcn.com\/llms.txt) --- ## Table of Contents 1. [Installation & Setup](#installation--setup) 2. [Project Configuration (Next.js 16)](#project-configuration-nextjs-16) 3. [Components & Usage](#components--usage) 4. [Blocks](#blocks) 5. [Forms](#forms) 6. [Sonner (Toast Replacement)](#sonner-toast-replacement) 7. [Dark Mode](#dark-mode) 8. [MCP Integration](#mcp-integration) 9. [Best Practices](#best-practices) --- ## Installation & Setup - Use pnpm for all commands. - Scaffold shadcn\/ui in an existing Next.js 16 app: ```bash pnpm dlx shadcn@latest init ``` - Accept prompts for **Next.js** + **TypeScript**. - CLI creates `components.json` and installs required deps (Tailwind, class utilities). - Add components when needed (keeps bundle small): ```bash pnpm dlx shadcn@latest add button card input textarea select # add blocks or utilities on demand ``` - After adding components, run: ```bash pnpm lint && pnpm test # if configured pnpm dev # verify styles render ``` --- ## Project Configuration (Next.js 16) - Tailwind is required. Ensure `tailwind.config.(ts|js)` includes shadcn paths: ```ts \/\/ tailwind.config.ts import type { Config } from "tailwindcss" import { fontFamily } from "tailwindcss\/defaultTheme" const config: Config = { darkMode: ["class"], content: [ ".\/app\/**\/*.{ts,tsx}", ".\/components\/**\/*.{ts,tsx}", ".\/src\/**\/*.{ts,tsx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, }, }, plugins: [require("tailwindcss-animate")], } export default config ``` - Use App Router and Server Components by default; mark client files with `"use client"`. - Keep `globals.css` with CSS variables from shadcn init; do not remove the color tokens. --- ## Components & Usage - Components live in `components\/ui`. Import directly: ```tsx import { Button } from "@\/components\/ui\/button" export function CTA() { return

shadcn-skills