Sonu kumar

Dashboard with Collapsible Sidebar

Cards 2.5K

About

This React code implements a dashboard with a collapsible sidebar featuring various options, a dark mode toggle, and displays various statistics and recent activity. It uses Lucide-React for icons and manages a dark/light theme via CSS class manipulation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dashboard with Collapsible Sidebar to your project and fits it to your theme.

Code

How Dashboard with Collapsible Sidebar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Example } from "@/components/ui/dashboard-with-collapsible-sidebar";

export default function DemoOne() {
  return <Example />;
}

Dependencies

More by Sonu kumar

View all
  • Modern Hero

    Modern Hero

    1.4K
  • Text Parallax Content (scroll)

    Text Parallax Content (scroll)

    1.2K
  • About Us section

    About Us section

    1.2K
  • Modern Animated Hero Section

    Modern Animated Hero Section

    1.2K
  • Animated Hero Section

    Animated Hero Section

    692
  • Cuisine Selector Chips

    Cuisine Selector Chips

    589
  • Bounce card features

    Bounce card features

    577
  • Futurastic Hero Section

    Futurastic Hero Section

    486

More in Cards

View all
  • Course Design Cards

    Course Design Cards

    1.1K
  • Statistics Card 2

    Statistics Card 2

    270
  • Statistics Card 7

    Statistics Card 7

    296
  • Card

    Card

    56
  • Stats cards with links

    Stats cards with links

    86
  • Interactive Tech Stack Bento Grid with Hover Effects

    Interactive Tech Stack Bento Grid with Hover Effects

    125
  • The Item one

    The Item one

    3
  • Card Studio

    Card Studio

    36