skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

nextjs-shadcn

Builds accessible UI components for Next.js App Router using shadcn/ui, Radix UI, and Tailwind CSS.

1|Updated Jul 29, 2026
Search Tags:#nextjs#ui components#shadcn#app-router#radix-ui#tailwind-css#tanstack-form
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill nextjs-shadcn-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-shadcn
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/nextjs-expert/skills/nextjs-shadcn
Command: npx skills add https://github.com/fusengine/kimi-code --skill nextjs-shadcn-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, accessible UI components in Next.js App Router requires coordinating shadcn/ui installation, Radix UI primitives, Tailwind CSS v4 styling, and correct form patterns, which is error-prone when done manually. ## Core Features & Use Cases - CLI-driven component installation: Installs shadcn/ui components via bunx --bun shadcn@latest add into @/modules/cores/shadcn/components/ui/ instead of hand-writing them. - Full component coverage: Provides reference guides for forms (Field/FieldLabel/FieldError with TanStack Form), overlays (Dialog, Sheet, Drawer), feedback (Sonner toasts, Alert, Skeleton), data display (Table, Badge, Calendar), and navigation (Sidebar, Command, DropdownMenu). - MCP registry integration: Uses mcp__shadcn__* tools to search registries, view component source, and get install commands before implementing. - Use Case: When adding a data table with sorting and pagination to a Next.js dashboard, the skill verifies the component in the shadcn registry, installs it via CLI, and wires it with TanStack Form and Tailwind styling following project conventions. ## Quick Start Use the nextjs-shadcn skill to add a dialog and form component to my Next.js App Router page following shadcn/ui conventions.

Frequently Asked Questions about nextjs-shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to a Next.js App Router project?▼

Install components with the CLI command `bunx --bun shadcn@latest add <component>` rather than writing them manually. Components are copied into your project at the configured components path, giving you full ownership of the source code.

Should I use TanStack Form or React Hook Form with shadcn/ui?▼

This skill mandates TanStack Form with the Field, FieldLabel, and FieldError pattern for all form implementations. React Hook Form is explicitly not used in this Next.js App Router setup.

Does shadcn/ui work with Next.js Server Components?▼

Yes, shadcn/ui components are RSC-compatible by default. Add the 'use client' directive only to components that require interactivity such as state, event handlers, or browser APIs.

What is the difference between shadcn/ui for Next.js and for React/Vite?▼

The component library is the same, but installation paths, routing integration, and Server Component handling differ. This skill covers the Next.js App Router variant; use a React/Vite-specific skill for plain React apps.

How do I find which shadcn/ui components are available before installing?▼

Use the shadcn MCP registry tools such as search_items_in_registries and view_items_in_registries to discover components, view their source code, and get the correct installation commands before implementing.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
acara-appacara-app
30

wayfinder-development

Generate type-safe TypeScript representations of Laravel backend routes.

Official
Intermediate
JongsixJongsix

moai-library-shadcn

Design and implement shadcn/ui React components with Tailwind CSS and Radix primitives.

Community
Advanced
fab679fab679
9

shadcn

Manage shadcn/ui component lifecycle with project-specific configuration enforcement.

Community
Advanced