A full website analytics screen: KPI cards with sparklines, an area chart with a 7D, 30D and 90D toggle, top pages, a traffic sources donut and a live online counter.
acme.studio · last 30 days
105K
11.3%285K
10.3%41.2%
2.1%3m 30s
2.5%Unique visitors per day
Where visitors come from
Ranked by page views
npx shadcn@latest add https://hyperblur.dev/r/analytics-dashboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/analytics-dashboard.tsx.
import { AnalyticsDashboard } from "@/components/hyperblur/analytics-dashboard"
<AnalyticsDashboard site="acme.studio" defaultRange="30D" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Accent color for the active nav item, main series, bars and focus rings. |
| brand | string | "Pulse" | Product name shown at the top of the sidebar. |
| site | string | "acme.studio" | Website name shown in the breadcrumb and the page subtitle. |
| user | string | "Maya Reyes" | Name used for the avatar initials in the top bar. |
| range | "7D" | "30D" | "90D" | Controlled date range. Pair with onRangeChange. | |
| defaultRange | "7D" | "30D" | "90D" | "30D" | Initial date range when uncontrolled. |
| onRangeChange | (range: AnalyticsRange) => void | Called when the range toggle changes. |