Dashboard

An admin dashboard home on its own canvas: a greeting with all-time totals, a period switch, an overview chart with a tab per metric, the activity feed, traffic sources, visitors by country and the top authors. Every number arrives through props, so you point it at your API and the layout, the empty states and the narrow-screen stacking take care of themselves.

Three looks read the same props: classic, solid panels on a light canvas; glass, milky panes over soft colour blobs; and liquid-glass, fluid refractive glass powered by LiquidGlassWrapper, LiquidGlassBackground, and LiquidGlassSvgFilter.

Admin overview

Switch Daily, Weekly and Monthly, open a metric tab, flip the chart between columns and a trend line, filter the activity feed, and hover the gauge, the barcode or a legend row to light up a share.

Passmetrics: with one series per period (day, week, month), oldest first — the last point is the current one and wears the accent. Give a metric a currency and it formats as money.
sources: , countries and authors are keyed by period too; the panels follow the switch. Leave sources or countries out and the panel says the data is unavailable.
links: give each panel a round open button. Pass linkComponent={Link} from next/link in a Next.js app.

Active Color

Glass

Milky glass panes on a soft canvas. Pick a metric tile to chart it, hover a capsule column, the half ring or a country segment, and follow the activity from a first post to a message. Switch to dark mode to see the glass go smoky.

Setvariant"glass": — the same metrics, activity, sources, countries and authors re-present as glass: the top authors sit in the pane's notch and the activity becomes one card per step.
Givetotals: a metric id and each KPI card says what the current period added ("+1,094 new users this month"); an href adds its round open button.
Passpayments: for the recent payments table and shortcuts for the tiles beside the activity. Leave payments out and the countries pane takes the full row.

Liquid Glass

Fluid refractive glass effect powered by SVG displacement noise filters. Wraps the dashboard with dynamic liquid glass backdrops, specular highlights, and ambient illumination using LiquidGlassWrapper, LiquidGlassBackground, and LiquidGlassSvgFilter.

Setvariant"liquid-glass": — applies fluid SVG distortion filters, specular highlights, and refractive backdrop glass layers built with LiquidGlassWrapper, LiquidGlassBackground, and LiquidGlassSvgFilter.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Dashboard

npx shadcn@latest add @algorize-ui/dashboard

components/custom/blocks/DashboardBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Dashboard to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

chart, popover, toggle-group and ui-liquid-glass are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/chart @algorize-ui/popover @algorize-ui/toggle-group @algorize-ui/ui-liquid-glass

motion is an npm package.

npm install motion

Features

Built from the library

The period, chart-style and activity switches are the segmented Toggle Group, the trend line is the Chart, and the rate explainer is a Popover — installing the section pulls those in.

Every value is text too

The gauge and barcode are backed by legend rows with the number and share, the chart has a screen-reader table, and the arrow keys read each column.

Follows your theme

The canvas glow, the current column, the tab indicator and the bars are mixed from --primary, so a theme preset repaints the whole section in light and dark.

Glass without the lag

The glass variant gets its depth from a sheen, a light rim and colour blobs on the canvas, not from backdrop-filter, so it scrolls as smoothly as the classic look. With reduced transparency turned on, the panes go solid.

Sizes to its container

The glass layout uses container queries, so it stacks, pairs up and spreads out by the width it is given — a sidebar layout and a full-width page both get the right grid.

No hydration surprises

The greeting, the date and the "4m ago" times read the visitor's clock after mount, so a server-rendered page and the browser agree. Pass now to pin them.

Best Practices & Guidelines

Send the change with the series

The badges show change[period] as given — compute it on your side the way your business reads it (raw totals, or the current period's pace against the last). Leave it out for a period and the tab shows no badge.

Keep the series the same length

The built-in Export writes one CSV row per point with a column per metric, so give every metric the same buckets for a period. Pass onExport to produce your own report instead.

It sizes to its container

Panels stack on phones, pair up on tablets and settle into the 8 + 4 / 4 + 4 + 4 grid from 1280px. Inside an app shell with a sidebar, give the section the content column and override its radius with className if it should sit flush.

Props Reference

Prop	Type	Default	Description
`variant`	`"classic" \| "glass" \| "liquid-glass"`	`"classic"`	The look. All variants read the same props. `liquid-glass` wraps the dashboard in fluid SVG displacement filters, specular highlights, and refractive glass backdrops using `LiquidGlassWrapper`, `LiquidGlassBackground`, and `LiquidGlassSvgFilter`.
`userName`	`string`	—	The greeting uses the first name: “Good afternoon, Ayesha”.
`summary`	`ReactNode`	built from today	The line under the greeting. By default it reads the last `day` point of each metric: “So far today: 24 new users…”.
`totals`	`DashboardTotal[]`	`[]`	All-time counts beside the greeting — `{ label, value, icon?, metric?, href? }`. The period switch never changes them. In glass, `metric` (a metric id) adds what the current period brought and `href` adds an open button.
`metrics`	`DashboardMetric[]`	`[]`	The overview tabs. See the shape below.
`activity`	`DashboardActivity[]`	`[]`	The feed, newest shown first, six per filter — `{ id, type: "user" \| "post" \| "payment" \| "message", title, subtitle?, status?, date, href?, person?, avatar? }`. Glass groups it by type into four steps, three rows each, with an avatar when `person` is set.
`sources`	`Partial<Record<DashboardPeriod, DashboardShare[]>>`	—	Visits by source — `{ id, label, value }`. The top three get their own colour; the rest fold into “Other”.
`signUps`	`Partial<Record<DashboardPeriod, number>>`	—	Sign-ups per period, for the visit-to-sign-up rate under the sources. Omit it to hide the rate.
`countries`	`Partial<Record<DashboardPeriod, DashboardShare[]>>`	—	Visits by country; add `code` (e.g. `"US"`) for the small badge.
`authors`	`Partial<Record<DashboardPeriod, DashboardAuthor[]>>`	—	Posts per author — `{ name, posts, avatar? }`. The top five are ranked against the leader; glass shows the top eight in the activity pane's notch.
`payments`	`DashboardPayment[]`	—	Glass only: the recent payments table, newest six — `{ id, amount, currency, method, status?, person?, avatar?, date }`. Leave it out to hide the pane.
`shortcuts`	`DashboardShortcut[]`	`[]`	Glass only: tiles beside the activity steps — `{ label, href, icon? }`. The first takes the brand fill.
`defaultPeriod`	`"day" \| "week" \| "month"`	`"month"`	The period selected on first render.
`onExport`	`(period: DashboardPeriod) => void`	CSV download	Replaces the built-in CSV of the overview series for the selected period.
`links`	`{ activity?, traffic?, countries?, authors?, payments? }`	`{}`	Where each panel's round open button goes. A panel without a link shows none.
`linkComponent`	`ElementType`	`"a"`	Renders the panel links and activity titles — pass `next/link` in a Next.js app.
`now`	`Date`	the visitor's clock	Pins “now” for the greeting, the date and the activity times.

DashboardMetric

Field	Type	Description
`id` / `label`	`string`	A stable key and the tab label.
`icon`	`ReactNode`	Shown beside the label from the `sm` breakpoint.
`noun`	`[string, string]`	Singular and plural for the summary line, e.g. `["new user", "new users"]`.
`currency`	`string`	An ISO code such as `"USD"`; the metric then formats as money.
`series`	`Record<"day" \| "week" \| "month", { label, shortLabel?, fullLabel?, value }[]>`	Oldest first. `shortLabel` is used on phones, `fullLabel` in the tooltip and for screen readers.
`change`	`Partial<Record<DashboardPeriod, number \| null>>`	Percent change of the current point against the one before (`12.5` is +12.5%).