Date Range Toolbar

Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Dashboard7 } from "@/components/beste/piece/dashboard7";

<Dashboard7
  range="Apr 1 – Apr 21"
  compare="vs previous"
  segment="All segments"
/>

More Dashboard pieces

View all Dashboard
Activity
Ada Lovelacejoined
2m
Marcus R.created Project Orion
14m
Priya S.edited Onboarding doc
1h
Tomás L.archived Q1 specs
3h

Activity Feed

dashboard4

Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

dashboard5

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Visit
12,400
Sign-up
3,42072%
Active
1,98042%
Paid
62069%

Funnel

dashboard6

Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.

Events this week2,840
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Weekly Bars

dashboard8

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Donut Breakdown

dashboard9

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

Conversion rate+12%
Last week3.41%
This week3.82%

Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.