# Next.js Dashboard Setup with shadcn/ui Follow these steps in order to create a modern dashboard application: 1. Create Project - Run: pnpm dlx shadcn@latest init - For quick setup with defaults: pnpm dlx shadcn@latest init -d - Select New York style and Zinc color scheme when prompted - Enable CSS variables for theming support 2. Configure Project Structure - Remove app/page.tsx (default demo page) - Create following directory structure: ``` app/ ├── layout.tsx ├── page.tsx (dashboard page) ├── loading.tsx ├── error.tsx └── components/ ├── ui/ (shadcn components) └── dashboard/ ├── header.tsx ├── sidebar.tsx ├── main.tsx └── widgets/ ``` 3. Install Essential Components ```bash pnpm dlx shadcn@latest add card pnpm dlx shadcn@latest add button pnpm dlx shadcn@latest add dropdown-menu pnpm dlx shadcn@latest add separator pnpm dlx shadcn@latest add sheet pnpm dlx shadcn@latest add theme-toggle ``` 4. Create Root Layout ```tsx // app/layout.tsx import { ThemeProvider } from '@/components/theme-provider' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` 5. Implement Dashboard Layout Components ```tsx // components/dashboard/header.tsx export function Header() { return (

) } // components/dashboard/sidebar.tsx export function Sidebar() { return (

{/* Add navigation items */}

) } ``` 6. Create Main Dashboard Page ```tsx // app/page.tsx import { Header } from '@/components/dashboard/header' import { Sidebar } from '@/components/dashboard/sidebar' export default function DashboardPage() { return (

{/* Add dashboard widgets */}

) } ``` 7. Add Mobile Responsiveness - Add Sheet component for mobile navigation - Implement responsive breakpoints - Create mobile menu toggle button 8. Implement Loading States ```tsx // app/loading.tsx export default function Loading() { return (

) } ``` 9. Follow Best Practices - Use TypeScript for all components - Keep shadcn components in ui directory - Create wrapper components for customization - Use React Server Components by default - Add client-side interactivity only when needed - Implement proper error boundaries - Follow accessibility guidelines 10. Performance Optimization - Implement code splitting - Use dynamic imports for heavy components - Add Suspense boundaries - Monitor bundle size - Optimize images and assets 11. Theme Configuration - Maintain consistent spacing with Tailwind - Use CSS variables for dynamic theming - Follow New York style guidelines - Implement dark mode correctly 12. Testing Setup (Recommended) - Add component tests - Implement E2E testing - Test responsive behavior - Verify theme switching - Test loading states

Next.js ShadCN UI Dashboard Setup

Tags

Preferred Models

AI Editors