How to Build an Interactive Dashboard in React with shadcn/ui

Rapid UI: Designing a High-Converting Dashboard with shadcn/ui

In today's data-driven software landscape, delivering complex information in an intuitive, lightning-fast interface is a core differentiator for modern SaaS platforms. To achieve this, engineering teams require tools that balance rapid prototyping with production-grade customizability. In this comprehensive guide, we will walk through how to build a highly performant, interactive react dashboard shadcn ui developers love to work with, combining cutting-edge UI primitives with robust data visualization.

When building enterprise-grade dashboards, developers often face a trade-off between rigid, pre-styled component libraries and the tedious process of writing custom CSS from scratch. By leveraging shadcn/ui, we bypass this compromise entirely. We will explore how to construct a responsive shadcn dashboard layout, integrate interactive data visualizations, implement dynamic theme switching, and optimize performance using advanced code-splitting techniques.

Why shadcn/ui is the Preferred Component Library for Startups

For startups and fast-moving engineering teams, speed-to-market and design consistency are paramount. Traditional component libraries like Material UI (MUI) or Chakra UI ship as heavy, pre-compiled npm packages. While convenient initially, they often introduce significant bundle bloat and present severe styling hurdles when your design team demands highly customized, bespoke interfaces.

This is where shadcn/ui represents a paradigm shift. It is not a component library in the traditional sense; rather, it is a collection of re-usable components that you copy and paste directly into your codebase via a CLI.

┌─────────────────────────────────────────────────────────┐
│                      Your Codebase                      │
│                                                         │
│   ┌──────────────────┐           ┌──────────────────┐   │
│   │  shadcn/ui Card  │◄──────────┤  Radix UI Prim.  │   │
│   │  (Fully Editable)│           │  (Accessibility) │   │
│   └────────┬─────────┘           └──────────────────┘   │
│            │                                            │
│            ▼                                            │
│   ┌──────────────────┐                                  │
│   │   Tailwind CSS   │                                  │
│   │  (Utility Classes)                                  │
│   └──────────────────┘                                  │
└─────────────────────────────────────────────────────────┘

The Architectural Advantages of shadcn/ui

Complete Ownership of Code: Because the components live directly inside your /components/ui directory, you have 100% control over their markup, logic, and styling. If you need to modify how a dropdown behaves or add a custom ARIA attribute, you edit the file directly—no complex wrapper components or theme overrides required.
Built on Radix UI Primitives: Under the hood, shadcn/ui utilizes Radix UI for its complex interactive components (like dialogs, dropdowns, and select menus). Radix handles the heavy lifting of keyboard navigation, focus management, and screen-reader accessibility (WAI-ARIA compliance), allowing you to focus purely on design and business logic.
Tailwind CSS Integration: Styling is handled entirely via Tailwind CSS utility classes. This ensures your bundle size remains exceptionally lean, as Tailwind purges unused styles automatically. For a deeper dive into how Tailwind compares to other styling methodologies in modern frameworks, check out our guide on styling Next.js with Tailwind vs Vanilla CSS.
Modular Dashboard Components: Instead of importing a massive monolithic library, you only install the specific modular dashboard components you need (e.g., npx shadcn@latest add card button dialog).

Comparison Matrix: UI Approaches for Modern Dashboards

By adopting this modular approach, engineering teams can build an interactive react dashboard shadcn ui that feels completely custom while maintaining the development velocity of a pre-built component library.

Setting Up the Dashboard Architecture: Sidebar, Header, Content Area

A robust shadcn dashboard layout requires a highly responsive, semantic grid system. The layout must seamlessly transition from a multi-column desktop view with a persistent sidebar to a single-column mobile view with a slide-out drawer.

Let's build a production-ready dashboard layout using Next.js (App Router), Tailwind CSS, and shadcn/ui primitives.

Step 1: Install Required shadcn Components

First, let's initialize shadcn/ui and add the necessary structural components:

npx shadcn@latest init
npx shadcn@latest add button sheet avatar dropdown-menu separator

Step 2: Designing the Layout Component

We will create a responsive layout that utilizes a collapsible sidebar. We'll use React state to manage the sidebar's open/closed state on mobile screens.

// components/dashboard-layout.tsx
"use client";
 
import * as React from "react";
import Link from "next/link";
import { Menu, LayoutDashboard, BarChart3, Settings, Users, Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {}
 
function Sidebar({ className }: SidebarProps) {
  return (
    <div className={`pb-12 min-h-screen border-r bg-card text-card-foreground ${className}`}>
      <div className="space-y-4 py-4">
        <div className="px-6 py-2">
          <h2 className="text-lg font-semibold tracking-tight text-primary">Vyrova Analytics</h2>
        </div>
        <div className="px-3 py-2">
          <div className="space-y-1">
            <Button asChild variant="secondary" className="w-full justify-start gap-2">
              <Link href="/dashboard">
                <LayoutDashboard className="h-4 w-4" />
                Overview
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/analytics">
                <BarChart3 className="h-4 w-4" />
                Analytics
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/customers">
                <Users className="h-4 w-4" />
                Customers
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/settings">
                <Settings className="h-4 w-4" />
                Settings
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
 
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = React.useState(false);
 
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Desktop Sidebar */}
      <Sidebar className="hidden md:block w-64 shrink-0" />
 
      {/* Main Content Wrapper */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Header */}
        <header className="flex h-16 items-center justify-between border-b px-6 bg-background">
          <div className="flex items-center gap-4">
            {/* Mobile Sidebar Trigger */}
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">Toggle Menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="p-0 w-64">
                <Sidebar className="w-full border-none" />
              </SheetContent>
            </Sheet>
            <h1 className="text-xl font-semibold tracking-tight hidden sm:block">Dashboard</h1>
          </div>
 
          {/* Header Actions */}
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" className="relative">
              <Bell className="h-5 w-5" />
              <span className="absolute top-1 right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
            </Button>
            
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/avatars/user.png" alt="User" />
                    <AvatarFallback>SC</AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">Saurabh Chaudhari</p>
                    <p className="text-xs leading-none text-muted-foreground">saurabh@vyrova.tech</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Profile</DropdownMenuItem>
                <DropdownMenuItem>Billing</DropdownMenuItem>
                <DropdownMenuItem>Settings</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Log out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>
 
        {/* Content Area */}
        <main className="flex-1 overflow-y-auto p-6 bg-muted/30">
          <div className="mx-auto max-w-7xl space-y-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

This layout establishes a clean, semantic structure. The desktop sidebar remains fixed on the left, while the mobile layout dynamically renders a hamburger menu that triggers a responsive slide-out drawer using shadcn's Sheet component. This architecture is crucial for an interactive react dashboard shadcn ui setup, ensuring that users on any device experience optimal readability and navigation.

Implementing Interactive Data Charts using Recharts

The core of any interactive react dashboard shadcn ui is its data visualization layer. To build highly interactive, responsive, and theme-aware charts, we integrate Recharts with shadcn's design tokens.

Recharts is a composable charting library built specifically for React. By leveraging Tailwind CSS variables defined in our shadcn global styles, we can ensure our charts automatically adapt to light and dark mode themes.

Step 1: Install Recharts and Lucide Icons

npm install recharts
npx shadcn@latest add card

Step 2: Creating a Theme-Aware Interactive Area Chart

Let's build a modular chart component that displays monthly revenue and active users. We will use CSS variables to dynamically style the chart elements, ensuring they match the active shadcn theme.

// components/dashboard/revenue-chart.tsx
"use client";
 
import * as React from "react";
import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
const data = [
  { month: "Jan", revenue: 4000, users: 2400 },
  { month: "Feb", revenue: 3000, users: 1398 },
  { month: "Mar", revenue: 2000, users: 9800 },
  { month: "Apr", revenue: 2780, users: 3908 },
  { month: "May", revenue: 1890, users: 4800 },
  { month: "Jun", revenue: 2390, users: 3800 },
  { month: "Jul", revenue: 3490, users: 4300 },
  { month: "Aug", revenue: 4200, users: 5100 },
  { month: "Sep", revenue: 5100, users: 6200 },
  { month: "Oct", revenue: 6800, users: 7500 },
  { month: "Nov", revenue: 7200, users: 8100 },
  { month: "Dec", revenue: 9400, users: 9900 },
];
 
export function RevenueChart() {
  const [timeframe, setTimeframe] = React.useState("12m");
 
  return (
    <Card className="col-span-4">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
        <div className="space-y-1">
          <CardTitle>Revenue Overview</CardTitle>
          <CardDescription>
            Interactive view of monthly recurring revenue (MRR) and active users.
          </CardDescription>
        </div>
        <Select value={timeframe} onValueChange={setTimeframe}>
          <SelectTrigger className="w-[120px]">
            <SelectValue placeholder="Select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="12m">Last 12 Months</SelectItem>
            <SelectItem value="6m">Last 6 Months</SelectItem>
            <SelectItem value="3m">Last 3 Months</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent className="px-2 sm:px-6">
        <div className="h-[350px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart
              data={timeframe === "6m" ? data.slice(6) : timeframe === "3m" ? data.slice(9) : data}
              margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
            >
              <defs>
                <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" vertical={false} />
              <XAxis
                dataKey="month"
                stroke="currentColor"
                fontSize={12}
                tickLine={false}
                axisLine={false}
                className="text-muted-foreground"
              />
              <YAxis
                stroke="currentColor"
                fontSize={12}
                tickLine={false}
                axisLine={false}
                className="text-muted-foreground"
                tickFormatter={(value) => `$${value}`}
              />
              <Tooltip
                content={({ active, payload }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="rounded-lg border bg-background p-3 shadow-md">
                        <p className="text-sm font-semibold text-foreground">{payload[0].payload.month}</p>
                        <div className="mt-1.5 space-y-1">
                          <p className="text-xs text-muted-foreground">
                            Revenue: <span className="font-medium text-primary">${payload[0].value}</span>
                          </p>
                          <p className="text-xs text-muted-foreground">
                            Users: <span className="font-medium text-chart-2">{payload[1].value}</span>
                          </p>
                        </div>
                      </div>
                    );
                  }
                  return null;
                }}
              />
              <Area
                type="monotone"
                dataKey="revenue"
                stroke="hsl(var(--primary))"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorRevenue)"
              />
              <Area
                type="monotone"
                dataKey="users"
                stroke="hsl(var(--chart-2))"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorUsers)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}

Key Implementation Details for Building Charts in React

CSS Variables Integration: Instead of hardcoding hex values (e.g., #3b82f6), we use hsl(var(--primary)) and hsl(var(--chart-2)). This ensures that when the user toggles dark mode, the chart colors instantly transition to match the new theme palette.
Responsive Containers: Wrapping the chart in Recharts' ResponsiveContainer ensures it dynamically resizes when the sidebar collapses or when the viewport changes.
Custom Tooltip Component: Standard tooltips often look out of place. By writing a custom React component inside the Tooltip's content prop, we style the tooltip using shadcn's standard card classes (bg-background, border, shadow-md), creating a unified visual language.

Dynamic Dark Mode Toggle and Responsive Sidebar Controls

A premium user experience requires seamless personalization. Implementing a dynamic dark mode toggle and responsive sidebar controls enhances usability, especially for power users who spend hours analyzing metrics.

We will use next-themes to manage theme state and build a toggle button using shadcn's DropdownMenu and Button components.

Step 1: Install next-themes

npm install next-themes

Step 2: Create the Theme Provider

Wrap your application layout with a custom theme provider to prevent flash-of-unstyled-content (FOUC) on initial load.

// components/theme-provider.tsx
"use client";
 
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Step 3: Implement the Theme Toggle Component

Now, let's create a toggle button that allows users to switch between Light, Dark, and System themes.

// components/theme-toggle.tsx
"use client";
 
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
export function ThemeToggle() {
  const { setTheme } = useTheme();
 
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="h-9 w-9">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Step 4: Integrating Theme Toggle into the Header

We can now integrate this ThemeToggle component directly into our DashboardLayout header actions:

// Inside components/dashboard-layout.tsx header actions
<div className="flex items-center gap-4">
  <ThemeToggle />
  <Button variant="ghost" size="icon" className="relative">
    <Bell className="h-5 w-5" />
    <span className="absolute top-1 right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
  </Button>
  {/* Profile Dropdown */}
</div>

With this setup, Tailwind's dark: modifier is activated globally. Because shadcn/ui maps its semantic colors (like --background, --foreground, --primary) to CSS variables that change based on the .dark class, your entire dashboard—including the custom Recharts visualizations—will transition smoothly between light and dark modes.

Want a High-Performance Web Application?

Our frontend engineers specialize in Next.js, React, and page speed optimization to maximize user conversions.

Let's Build Your Web App

Optimizing Performance: Code-Splitting Heavy Chart Components

While building charts in React provides rich interactivity, charting libraries like Recharts and D3 can significantly increase your initial JavaScript bundle size. If users have to download several hundred kilobytes of charting logic just to render the initial dashboard layout, your Time to Interactive (TTI) and First Contentful Paint (FCP) metrics will suffer.

To maintain a high-converting, lightning-fast user experience, we must implement code-splitting. By dynamically importing heavy chart components, we defer loading their JavaScript until the shell of the dashboard has fully rendered.

Step 1: Create a Loading Skeleton Component

Before loading the actual chart, we should display a visually appealing skeleton loader that matches the exact dimensions of the chart card. This prevents layout shifts (CLS) and improves perceived performance.

// components/dashboard/chart-skeleton.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
export function ChartSkeleton() {
  return (
    <Card className="col-span-4">
      <CardHeader className="space-y-2">
        <div className="h-5 w-1/4 animate-pulse rounded bg-muted" />
        <div className="h-4 w-2/5 animate-pulse rounded bg-muted" />
      </CardHeader>
      <CardContent className="h-[350px] flex items-end gap-4 pt-10">
        <div className="h-[60%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[40%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[85%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[55%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[95%] w-full animate-pulse rounded bg-muted/50" />
      </CardContent>
    </Card>
  );
}

Step 2: Dynamically Import the Chart Component

In Next.js, we use next/dynamic to load components lazily. We can configure it to display our ChartSkeleton while the heavy Recharts bundle is being fetched in the background.

// app/dashboard/page.tsx
import React from "react";
import dynamic from "next/dynamic";
import { ChartSkeleton } from "@/components/dashboard/chart-skeleton";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DollarSign, Users, CreditCard, Activity } from "lucide-react";
 
// Dynamically import the heavy RevenueChart component
const DynamicRevenueChart = dynamic(
  () => import("@/components/dashboard/revenue-chart").then((mod) => mod.RevenueChart),
  {
    ssr: false, // Recharts relies on browser APIs, so we disable SSR
    loading: () => <ChartSkeleton />,
  }
);
 
export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Metric Cards Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$45,231.89</div>

Rapid UI: Designing a High-Converting Dashboard with shadcn/ui

Why shadcn/ui is the Preferred Component Library for Startups

┌─────────────────────────────────────────────────────────┐
│                      Your Codebase                      │
│                                                         │
│   ┌──────────────────┐           ┌──────────────────┐   │
│   │  shadcn/ui Card  │◄──────────┤  Radix UI Prim.  │   │
│   │  (Fully Editable)│           │  (Accessibility) │   │
│   └────────┬─────────┘           └──────────────────┘   │
│            │                                            │
│            ▼                                            │
│   ┌──────────────────┐                                  │
│   │   Tailwind CSS   │                                  │
│   │  (Utility Classes)                                  │
│   └──────────────────┘                                  │
└─────────────────────────────────────────────────────────┘

The Architectural Advantages of shadcn/ui

Complete Ownership of Code: Because the components live directly inside your /components/ui directory, you have 100% control over their markup, logic, and styling. If you need to modify how a dropdown behaves or add a custom ARIA attribute, you edit the file directly—no complex wrapper components or theme overrides required.
Built on Radix UI Primitives: Under the hood, shadcn/ui utilizes Radix UI for its complex interactive components (like dialogs, dropdowns, and select menus). Radix handles the heavy lifting of keyboard navigation, focus management, and screen-reader accessibility (WAI-ARIA compliance), allowing you to focus purely on design and business logic.
Tailwind CSS Integration: Styling is handled entirely via Tailwind CSS utility classes. This ensures your bundle size remains exceptionally lean, as Tailwind purges unused styles automatically. For a deeper dive into how Tailwind compares to other styling methodologies in modern frameworks, check out our guide on styling Next.js with Tailwind vs Vanilla CSS.
Modular Dashboard Components: Instead of importing a massive monolithic library, you only install the specific modular dashboard components you need (e.g., npx shadcn@latest add card button dialog).

Comparison Matrix: UI Approaches for Modern Dashboards

Setting Up the Dashboard Architecture: Sidebar, Header, Content Area

Let's build a production-ready dashboard layout using Next.js (App Router), Tailwind CSS, and shadcn/ui primitives.

Step 1: Install Required shadcn Components

First, let's initialize shadcn/ui and add the necessary structural components:

npx shadcn@latest init
npx shadcn@latest add button sheet avatar dropdown-menu separator

Step 2: Designing the Layout Component

We will create a responsive layout that utilizes a collapsible sidebar. We'll use React state to manage the sidebar's open/closed state on mobile screens.

// components/dashboard-layout.tsx
"use client";
 
import * as React from "react";
import Link from "next/link";
import { Menu, LayoutDashboard, BarChart3, Settings, Users, Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {}
 
function Sidebar({ className }: SidebarProps) {
  return (
    <div className={`pb-12 min-h-screen border-r bg-card text-card-foreground ${className}`}>
      <div className="space-y-4 py-4">
        <div className="px-6 py-2">
          <h2 className="text-lg font-semibold tracking-tight text-primary">Vyrova Analytics</h2>
        </div>
        <div className="px-3 py-2">
          <div className="space-y-1">
            <Button asChild variant="secondary" className="w-full justify-start gap-2">
              <Link href="/dashboard">
                <LayoutDashboard className="h-4 w-4" />
                Overview
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/analytics">
                <BarChart3 className="h-4 w-4" />
                Analytics
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/customers">
                <Users className="h-4 w-4" />
                Customers
              </Link>
            </Button>
            <Button asChild variant="ghost" className="w-full justify-start gap-2">
              <Link href="/dashboard/settings">
                <Settings className="h-4 w-4" />
                Settings
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
 
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = React.useState(false);
 
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Desktop Sidebar */}
      <Sidebar className="hidden md:block w-64 shrink-0" />
 
      {/* Main Content Wrapper */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Header */}
        <header className="flex h-16 items-center justify-between border-b px-6 bg-background">
          <div className="flex items-center gap-4">
            {/* Mobile Sidebar Trigger */}
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">Toggle Menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="p-0 w-64">
                <Sidebar className="w-full border-none" />
              </SheetContent>
            </Sheet>
            <h1 className="text-xl font-semibold tracking-tight hidden sm:block">Dashboard</h1>
          </div>
 
          {/* Header Actions */}
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" className="relative">
              <Bell className="h-5 w-5" />
              <span className="absolute top-1 right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
            </Button>
            
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/avatars/user.png" alt="User" />
                    <AvatarFallback>SC</AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">Saurabh Chaudhari</p>
                    <p className="text-xs leading-none text-muted-foreground">saurabh@vyrova.tech</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Profile</DropdownMenuItem>
                <DropdownMenuItem>Billing</DropdownMenuItem>
                <DropdownMenuItem>Settings</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Log out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>
 
        {/* Content Area */}
        <main className="flex-1 overflow-y-auto p-6 bg-muted/30">
          <div className="mx-auto max-w-7xl space-y-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

Implementing Interactive Data Charts using Recharts

Step 1: Install Recharts and Lucide Icons

npm install recharts
npx shadcn@latest add card

Step 2: Creating a Theme-Aware Interactive Area Chart

Let's build a modular chart component that displays monthly revenue and active users. We will use CSS variables to dynamically style the chart elements, ensuring they match the active shadcn theme.

// components/dashboard/revenue-chart.tsx
"use client";
 
import * as React from "react";
import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
const data = [
  { month: "Jan", revenue: 4000, users: 2400 },
  { month: "Feb", revenue: 3000, users: 1398 },
  { month: "Mar", revenue: 2000, users: 9800 },
  { month: "Apr", revenue: 2780, users: 3908 },
  { month: "May", revenue: 1890, users: 4800 },
  { month: "Jun", revenue: 2390, users: 3800 },
  { month: "Jul", revenue: 3490, users: 4300 },
  { month: "Aug", revenue: 4200, users: 5100 },
  { month: "Sep", revenue: 5100, users: 6200 },
  { month: "Oct", revenue: 6800, users: 7500 },
  { month: "Nov", revenue: 7200, users: 8100 },
  { month: "Dec", revenue: 9400, users: 9900 },
];
 
export function RevenueChart() {
  const [timeframe, setTimeframe] = React.useState("12m");
 
  return (
    <Card className="col-span-4">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
        <div className="space-y-1">
          <CardTitle>Revenue Overview</CardTitle>
          <CardDescription>
            Interactive view of monthly recurring revenue (MRR) and active users.
          </CardDescription>
        </div>
        <Select value={timeframe} onValueChange={setTimeframe}>
          <SelectTrigger className="w-[120px]">
            <SelectValue placeholder="Select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="12m">Last 12 Months</SelectItem>
            <SelectItem value="6m">Last 6 Months</SelectItem>
            <SelectItem value="3m">Last 3 Months</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent className="px-2 sm:px-6">
        <div className="h-[350px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart
              data={timeframe === "6m" ? data.slice(6) : timeframe === "3m" ? data.slice(9) : data}
              margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
            >
              <defs>
                <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" vertical={false} />
              <XAxis
                dataKey="month"
                stroke="currentColor"
                fontSize={12}
                tickLine={false}
                axisLine={false}
                className="text-muted-foreground"
              />
              <YAxis
                stroke="currentColor"
                fontSize={12}
                tickLine={false}
                axisLine={false}
                className="text-muted-foreground"
                tickFormatter={(value) => `$${value}`}
              />
              <Tooltip
                content={({ active, payload }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="rounded-lg border bg-background p-3 shadow-md">
                        <p className="text-sm font-semibold text-foreground">{payload[0].payload.month}</p>
                        <div className="mt-1.5 space-y-1">
                          <p className="text-xs text-muted-foreground">
                            Revenue: <span className="font-medium text-primary">${payload[0].value}</span>
                          </p>
                          <p className="text-xs text-muted-foreground">
                            Users: <span className="font-medium text-chart-2">{payload[1].value}</span>
                          </p>
                        </div>
                      </div>
                    );
                  }
                  return null;
                }}
              />
              <Area
                type="monotone"
                dataKey="revenue"
                stroke="hsl(var(--primary))"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorRevenue)"
              />
              <Area
                type="monotone"
                dataKey="users"
                stroke="hsl(var(--chart-2))"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorUsers)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}

Key Implementation Details for Building Charts in React

CSS Variables Integration: Instead of hardcoding hex values (e.g., #3b82f6), we use hsl(var(--primary)) and hsl(var(--chart-2)). This ensures that when the user toggles dark mode, the chart colors instantly transition to match the new theme palette.
Responsive Containers: Wrapping the chart in Recharts' ResponsiveContainer ensures it dynamically resizes when the sidebar collapses or when the viewport changes.
Custom Tooltip Component: Standard tooltips often look out of place. By writing a custom React component inside the Tooltip's content prop, we style the tooltip using shadcn's standard card classes (bg-background, border, shadow-md), creating a unified visual language.

Dynamic Dark Mode Toggle and Responsive Sidebar Controls

We will use next-themes to manage theme state and build a toggle button using shadcn's DropdownMenu and Button components.

Step 1: Install next-themes

npm install next-themes

Step 2: Create the Theme Provider

Wrap your application layout with a custom theme provider to prevent flash-of-unstyled-content (FOUC) on initial load.

// components/theme-provider.tsx
"use client";
 
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Step 3: Implement the Theme Toggle Component

Now, let's create a toggle button that allows users to switch between Light, Dark, and System themes.

// components/theme-toggle.tsx
"use client";
 
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
export function ThemeToggle() {
  const { setTheme } = useTheme();
 
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="h-9 w-9">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Step 4: Integrating Theme Toggle into the Header

We can now integrate this ThemeToggle component directly into our DashboardLayout header actions:

// Inside components/dashboard-layout.tsx header actions
<div className="flex items-center gap-4">
  <ThemeToggle />
  <Button variant="ghost" size="icon" className="relative">
    <Bell className="h-5 w-5" />
    <span className="absolute top-1 right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
  </Button>
  {/* Profile Dropdown */}
</div>

Want a High-Performance Web Application?

Our frontend engineers specialize in Next.js, React, and page speed optimization to maximize user conversions.

Let's Build Your Web App

Optimizing Performance: Code-Splitting Heavy Chart Components

Step 1: Create a Loading Skeleton Component

// components/dashboard/chart-skeleton.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
export function ChartSkeleton() {
  return (
    <Card className="col-span-4">
      <CardHeader className="space-y-2">
        <div className="h-5 w-1/4 animate-pulse rounded bg-muted" />
        <div className="h-4 w-2/5 animate-pulse rounded bg-muted" />
      </CardHeader>
      <CardContent className="h-[350px] flex items-end gap-4 pt-10">
        <div className="h-[60%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[40%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[85%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[55%] w-full animate-pulse rounded bg-muted/50" />
        <div className="h-[95%] w-full animate-pulse rounded bg-muted/50" />
      </CardContent>
    </Card>
  );
}

Step 2: Dynamically Import the Chart Component

In Next.js, we use next/dynamic to load components lazily. We can configure it to display our ChartSkeleton while the heavy Recharts bundle is being fetched in the background.

// app/dashboard/page.tsx
import React from "react";
import dynamic from "next/dynamic";
import { ChartSkeleton } from "@/components/dashboard/chart-skeleton";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DollarSign, Users, CreditCard, Activity } from "lucide-react";
 
// Dynamically import the heavy RevenueChart component
const DynamicRevenueChart = dynamic(
  () => import("@/components/dashboard/revenue-chart").then((mod) => mod.RevenueChart),
  {
    ssr: false, // Recharts relies on browser APIs, so we disable SSR
    loading: () => <ChartSkeleton />,
  }
);
 
export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Metric Cards Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$45,231.89</div>

Rapid UI: Designing a High-Converting Dashboard with shadcn/ui

Why shadcn/ui is the Preferred Component Library for Startups

The Architectural Advantages of shadcn/ui

Comparison Matrix: UI Approaches for Modern Dashboards

Setting Up the Dashboard Architecture: Sidebar, Header, Content Area

Step 1: Install Required shadcn Components

Step 2: Designing the Layout Component

Implementing Interactive Data Charts using Recharts

Step 1: Install Recharts and Lucide Icons

Step 2: Creating a Theme-Aware Interactive Area Chart

Key Implementation Details for Building Charts in React

Dynamic Dark Mode Toggle and Responsive Sidebar Controls

Step 1: Install next-themes

Step 2: Create the Theme Provider

Step 3: Implement the Theme Toggle Component

Step 4: Integrating Theme Toggle into the Header

Want a High-Performance Web Application?

Optimizing Performance: Code-Splitting Heavy Chart Components

Step 1: Create a Loading Skeleton Component

Step 2: Dynamically Import the Chart Component

Related Articles

Hardening Your API Security: Rate Limiting, JWT, and CORS Rules

Implementing Automated Backups and Disaster Recovery Plans

Cloud Cost Optimization: How to Cut AWS/GCP Bills in Half

Rapid UI: Designing a High-Converting Dashboard with shadcn/ui

Why shadcn/ui is the Preferred Component Library for Startups

The Architectural Advantages of shadcn/ui

Comparison Matrix: UI Approaches for Modern Dashboards

Setting Up the Dashboard Architecture: Sidebar, Header, Content Area

Step 1: Install Required shadcn Components

Step 2: Designing the Layout Component

Implementing Interactive Data Charts using Recharts

Step 1: Install Recharts and Lucide Icons

Step 2: Creating a Theme-Aware Interactive Area Chart

Key Implementation Details for Building Charts in React

Dynamic Dark Mode Toggle and Responsive Sidebar Controls

Step 1: Install next-themes

Step 2: Create the Theme Provider

Step 3: Implement the Theme Toggle Component

Step 4: Integrating Theme Toggle into the Header

Want a High-Performance Web Application?

Optimizing Performance: Code-Splitting Heavy Chart Components

Step 1: Create a Loading Skeleton Component

Step 2: Dynamically Import the Chart Component

Related Articles

Hardening Your API Security: Rate Limiting, JWT, and CORS Rules

Implementing Automated Backups and Disaster Recovery Plans

Cloud Cost Optimization: How to Cut AWS/GCP Bills in Half