Dashboard Layout

A full-featured admin dashboard page with stat cards, activity feed, and quick actions panel. Uses staggered Framer Motion animations.

Preview

Dashboard

Welcome back. Here is your overview.

Online

Users

12,847

+12%

Revenue

$48,352

+8%

Active

1,429

-3%

Growth

+24.5%

+2%

Recent Activity

Alex upgraded to Pro

Sarah created a project

Mike submitted a ticket

Quick Actions

Installation

npx shadcn@latest add @shadszn/dashboard-layout

Files Installed

dashboard-layout/page.tsx -- Main dashboard page component
dashboard-layout/components/stat-card.tsx -- Reusable stat card with trend indicator

Key Features

4-column responsive stat card grid with staggered entrance animation
Recent activity feed with avatar initials and timestamps
Quick actions sidebar with glass-morphism buttons
System status badge indicator
Uses Card, Button, and Badge components

Customization

// Replace the stats array with your own data
const stats = [
  {
    title: "Total Users",
    value: "12,847",
    change: "12% from last month",
    trend: "up",
    icon: <Users className="h-5 w-5" />,
  },
  // ... add more stat objects
]

// Replace recentActivity with your own feed data
const recentActivity = [
  { user: "Alex Thompson", action: "Upgraded to Pro plan", time: "2 min ago" },
  // ... add more activity items
]