Ultimate ShadCN Tutorial 2025 | React Next.js ShadCN Dashboard Project

Introduction

This tutorial provides a comprehensive guide on creating a dashboard using the ShadCN UI library with React and Next.js. It covers installation, custom theming, component design, and various features such as charts, forms, and navigation. By following these steps, you'll be able to build a fully functional dashboard that leverages the capabilities of ShadCN and Radix UI.

Step 1: Understanding Radix UI and ShadCN UI

• Radix UI: A set of low-level UI primitives that provide accessible components.
• ShadCN UI: A library built on top of Radix UI that offers ready-to-use components styled with Tailwind CSS.

Step 2: Installing ShadCN UI

1. Open your terminal.
2. Navigate to your Next.js project directory.
3. Run the following command to install ShadCN:

   npm install @shadcn/ui
   

4. Install necessary dependencies for Tailwind CSS if not already done:

   npm install tailwindcss postcss autoprefixer
   

Step 3: Utilizing ShadCN Variants and Custom Styling

• Explore the ShadCN variants to customize the look of your components.

Use Tailwind CSS classes for styling. Common variants include

• bg-primary
• text-secondary
• Modify existing styles by creating custom classes in your CSS files.

Step 4: Implementing Custom Theming

• Create a theme context to manage color schemes.
• Define your color palette and styles in a separate theme file.
• Apply the theme using a provider at the root of your application.

Step 5: Next.js Dashboard Design

1. Set up the basic structure of your dashboard.
2. Create your main layout component to define headers and footers.
3. Use ShadCN components to build the dashboard interface.

Step 6: Designing the Navbar

1. Create a Navbar component using ShadCN.
2. Implement responsive design using Tailwind's utility classes.
3. Include links to different sections of your dashboard.

Step 7: Creating a Dropdown Menu

1. Use ShadCN's dropdown components to add menus.
2. Ensure accessibility by following Radix UI guidelines.
3. Style the dropdowns with Tailwind CSS.

Step 8: Implementing Dark Mode

1. Create a toggle button to switch between light and dark themes.
2. Use CSS variables or Tailwind's dark mode classes to handle styling changes.

Step 9: Building the Sidebar

1. Create a Sidebar component using ShadCN.
2. Implement collapsing functionality for better navigation.
3. Add icons and badges for enhanced visual appeal.

Step 10: Adding Charts to Your Dashboard

1. Install Recharts or another chart library:

   npm install recharts
   

2. Create components for different chart types (Area, Pie, Line).
3. Render the charts with data fetched from an API or defined arrays.

Step 11: Creating User Profile and Cards

1. Design a User Profile page using ShadCN components.
2. Create reusable Card components for displaying user information.
3. Implement form components for user input using ShadCN.

Step 12: Implementing Tables with Tanstack React Table

1. Install Tanstack Table:

   npm install @tanstack/react-table
   

2. Create a table component that displays data.
3. Implement sorting, pagination, and row selection features.

Conclusion

By following these steps, you will effectively create a fully functional dashboard with ShadCN, React, and Next.js. Explore each component's features and customize them to meet your specific needs. Next steps may include expanding the functionality of your dashboard, integrating additional APIs, or exploring further components from the ShadCN library.