Next.js + shadcn/ui

Next.js

shadcn/ui integration for Next.js App Router with field components, TanStack Form, and Tailwind CSS v4.

Overview

This skill provides best practices for using shadcn/ui within a Next.js App Router project. It covers component installation, Server/Client Component patterns, form handling with TanStack Form and field components, and Tailwind CSS v4 configuration — ensuring shadcn/ui components work correctly in the App Router's server-first architecture.

When to Use

• Setting up shadcn/ui in a new or existing Next.js App Router project
• Building forms with shadcn/ui field components and TanStack Form
• Need to understand which shadcn/ui components require "use client" and which work as Server Components
• Configuring Tailwind CSS v4 alongside shadcn/ui theming
• Integrating shadcn/ui data tables, dialogs, or complex interactive components in App Router

Key Features

• App Router-aware — correct Server/Client Component boundaries for each shadcn/ui component
• Field components — pre-built form field wrappers (input, select, checkbox, etc.) that connect to form state
• TanStack Form integration — type-safe form handling with validation, error display, and submission
• Server/Client patterns — guidance on composing server-rendered layouts with client-interactive components
• Tailwind CSS v4 configuration — CSS-first config, theme tokens, and dark mode setup compatible with shadcn/ui
• Component installation — correct npx shadcn@latest add workflows and dependency management

Example Prompts

"Set up shadcn/ui in my Next.js App Router project with Tailwind v4"
"Build a user registration form using shadcn field components and TanStack Form"
"Create a data table with sorting and pagination using shadcn/ui"

Source

• Skill folder: skills/nextjs-shadcn/
• Standard: agentskills.io