Mohammad Shehadeh

Revenue Dashboard

Dashboards 1

About

Revenue dashboard with a month stepper, a plan-mix donut and legend, an invoice status list and a paginated transactions list. Amounts are numbers formatted through Intl, and every colour comes from a lookup keyed by plan or status, so no Tailwind class is stored in the data.

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

Code

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

Usage.tsx

import Dashboard03 from "@/components/ui/dashboard-03";

export default function Dashboard03Demo() {
  return <Dashboard03 />;
}

Dependencies

More by Mohammad Shehadeh

View all
  • Feature Problem Cards

    Feature Problem Cards

    90
  • Feature Grid Spotlight Cards

    Feature Grid Spotlight Cards

    73
  • Ecommerce Category Page

    Ecommerce Category Page

    72
  • Split Login

    Split Login

    68
  • Comparison Section

    Comparison Section

    65
  • Dithered Shader CTA

    Dithered Shader CTA

    64
  • Comparison Table

    Comparison Table

    64
  • FAQ Two Column

    FAQ Two Column

    63

More in Dashboards

View all
  • Dashboard with Collapsible Sidebar

    Dashboard with Collapsible Sidebar

    2.5K
  • Sidebar

    Sidebar

    286
  • SaaS Template

    SaaS Template

    2.5K
  • Course Design Cards

    Course Design Cards

    1.1K
  • Chat template

    Chat template

    614
  • System Status Block

    System Status Block

    316
  • Statistics Card 7

    Statistics Card 7

    301
  • Bar Chart

    Bar Chart

    1

Explore more

Part of Hirael — browse the full library on 21st.dev.