@dashboardblocks

Primitives for activity feeds: a list with connectors that line up with the markers, tinted icons by tone, an unread dot, relative times and "Today" and "Yeste…

Primitives for LLM usage: token cost at per-million prices with cached input billed separately, cache savings and hit rate, compact token and dollar formatting…

Primitives for alerts: critical, warning, info and resolved severities written as coloured words, plus relative time formatting.

An animated number component.

An animated wave component.

Primitives for app shells built on the shadcn sidebar: navigation sections from data with active links, badges and collapsible child links, a brand link, a wor…

Chart components.

Primitives for signing in and joining a workspace: a full-page frame with one narrow centred column, a one-time code input with a box per digit that handles pa…

Primitives for subscription billing: billing dates, MRR movement from starting to ending MRR, net revenue retention, a waterfall chart of the movement and an i…

Primitives for loading, refreshing, empty and error states: a skeleton, a dimmed frame that keeps its layout while it refreshes, a message with an action, and …

Primitives for part-to-whole breakdowns: a segmented 100% bar, legend keys and share formatting.

Primitives for full-size chart panels: tooltip, legend, axis defaults and an accessible data table.

Primitives for checklists and steppers: done, in progress, to do and skipped states, each with a marker shape and a status word, progress maths and wording tha…

The parts every table is drawn with: rows, headers, row headers, group headers and cells that pad the edges of the table, numbers aligned to the end, a compact…

Dashboard tables on TanStack Table: sorting, search, facet filters, pagination, row selection and column visibility, with inline bars, scrolling sideways when …

Primitives for a command menu: a search dialog of pages, actions and records that filters as you type or shows results you fetch, with descriptions, shortcuts …

Primitives for comparisons: deltas, a two-proportion test with a 95% interval, diverging bars, dumbbells and an interval bar.

Primitives for dashboard headers: a date range preset menu, a compare switch, filter menus, filter chips and an export menu.

Primitives for deployments: ready, failed, building, queued and rolled back statuses written as coloured words, duration and short commit formatting, DORA band…

Primitives for distributions: quantiles from raw values or from binned counts, binning, a five-number summary, the share above a limit, round ticks, a histogra…

Primitives for error and interruption pages: a full-page frame with your brand, a centred message, an optional code and icon, actions and footer links, plus UT…

Primitives for customer feedback: a rating summary with the average and share of each rating, CSAT as the share of 4 and 5 ratings, net sentiment, stars filled…

Primitives for flows: a recharts Sankey chart that keeps each flow's colour downstream, draws drop-offs muted and highlights what a hovered node or band connec…

Primitives for forecasts: a straight-line fit with a prediction interval that widens with the horizon, run-rate projection, date-to-target solving, a striped p…

Primitives for forms without a form library: a form state hook with validation on blur and submit, server errors, dirty and submitting flags, a titled form sec…

en-US formatting for numbers, compact numbers, currency, percentages from ratios, signed differences with a real minus, percentage points, UTC date ranges and …

Primitives for conversion funnels: step conversion maths, the biggest drop and a stage bar.

Primitives for gauges and scores: a semicircle or three-quarter arc gauge built as a meter, with labelled bands, a target tick and an animated fill, band label…

Primitives for location metrics: a US state tile map and a dotted world map from an embedded land mask with markers sized by value, both with the shared chart …

Primitives for goals and targets: pace against a straight line to the target, a progress bar with an expected-by-now marker and the projection hatched, and the…

Primitives for heatmaps: a single-hue colour scale, a keyboard-readable grid of squares or dots with the shared chart tooltip, optional bars above its columns,…

An icon component.

Primitives for insights: positive, negative, neutral and anomaly kinds, each named by a coloured word, sentences with their metrics picked out in colour, and a…

Primitives for inventory: out of stock, low, in stock and overstock from on-hand stock and the reorder point, each as a coloured label, days of cover, a reorde…

Primitives for KPIs: a block with a top rule, a value that counts up with the final value read out, the change vs the previous period written as a sentence, in…

A button beside a number that shows how it was computed: what’s counted, the date range, the filters, the query’s name and a link to the rows.

Primitives for composing ranked lists and leaderboards.

A link provider that makes every primitive render your router's link, for client-side navigation, with plain anchors as the default.

Primitives for compact lists of metrics: a row with value, the change written as words and a sparkline, a bar against a target with its status, and value forma…

Primitives for notifications: a bell with an unread count that opens a panel, a header with an action, and a notification row that opens as a whole while its o…

Primitives for page headers: a heading with a badge, media and description, actions that wrap, a row of key numbers, a back link, section tabs that put what do…

Primitives for pipelines of work in flight: stage summaries with count, value and weighted value, days in stage with a stuck state, a stage header, an item car…

A progress bar component.

Primitives for live data: an interval hook, a seeded random generator for demo streams, a rolling window, a pulsing live label that stays still for reduced mot…

Primitives for a record's page or panel: a layout with a details column beside the main content, the number that leads the record, titled sections under a rule…

Primitives for retention: rates per cohort, a size-weighted average curve, where the curve levels off, the growth accounting quick ratio, a shaded cohort table…

A ring component.

Primitives for scatter plots and matrices: a least-squares line with the correlation coefficient described in words, a median, categorical colours in a fixed o…

Primitives for schedules: date helpers that take a fixed now and a time zone, an event row, urgency labels and badges, and a keyboard-navigable month calendar.

Primitives for security: info, warning and critical audit severities and passing, attention and failing check results as coloured words, a desktop or phone dev…

Primitives for settings pages: owner, admin, member and viewer roles with what each can do and a menu to pick one, a row that puts a label and description besi…

Primitives for spend and budgets: pace against an even spend of the budget with a projected total and a status, runway at the current net burn, a budget bar wi…

A select for one value from a list of options, with a placeholder, built on the shadcn Select so its menu follows your style and font.

Two or three short facts about one subject on one line, joined by a middle dot that screen readers skip and that never ends a line.

A status written as a coloured word: good, warning, bad, info and neutral tones in the shades every block uses.

Primitives for a row of related stats: ruled columns, labels, light values, the change vs the previous period as a sentence or an arrow, and sparklines.

Primitives for service status: status levels written as a coloured dot and word, a legend, and a 90-day uptime bar with a tooltip for each day.

Primitives for people: avatars with initials and a colour picked from the name, presence as a dot on the avatar and a coloured word, and an avatar stack with a…

Primitives for timelines on recharts: a UTC date scale, week, month and quarter ticks, days between dates, done, in progress, planned and at risk statuses each…

A trend indicator component.

Primitives for usage against a limit: within limit, nearing it, critical and over limit, each with a label (a coloured word, or a badge with an icon), the shar…

Primitives for kanban boards: a board of columns with drag and drop by mouse, touch and keyboard and announced moves, columns with counts, WIP limits that warn…

Primitives for comments: threads with one level of replies joined by a line, a composer that suggests people after @ and submits with ⌘ Enter, highlighted ment…

Primitives for calendars: a toolbar with today, previous, next and a view switch, a keyboard-navigable month grid with event chips, multi-day bars and "+N more…

Primitives for files: a dropzone around a real file input that checks type, size and count, a provider-agnostic upload hook with progress, cancel, retry and a …

A line of muted text with a chevron that shows or hides what is under it, such as a tool call’s input and output or a model’s reasoning.

Code in a code block with copy, highlighted with Shiki in the theme’s own colours: syntax muted, values in the chart colour, and any text you name marked, such…

The parts every AI block shares: message types that take the Vercel AI SDK’s useChat and UIMessage as they are, Markdown from a model drawn with safe links and…

Primitives for AI chat that take the Vercel AI SDK’s useChat as it is: a scrolling log that puts each new question at the top with its reply growing below, ope…

Primitives for printable documents such as invoices, receipts, quotes and packing slips: totals that add up to the cent with discounts, tax per rate, shipping …

Primitives for first-run setup: a full-page frame with step progress and Back, Skip and Continue actions that moves focus to each new step, radio and checkbox …

A single value with its change and what it is compared with.

A value with its change written beside the label, for a tight grid of KPIs.

A rate beside its previous value, with the change in percentage points.

A value with its change and a button beside it that shows the date range, filters and query behind the number.

Progress to a monthly target, with the projected total hatched ahead of it and a line where an even pace would be by today.

The share of work done, as one bar split by status with a count for each.

A count against a goal as a ring, with how many are left and how many a day that takes.

The week's total with a bar for each day and the change on the week before.

Each day's value with its goal marked on the bar, the share of the goal reached and how many days met it.

This week as a filled area over last week as a dashed line, with the days it fell behind.

Gross profit with its margin, and profit inside revenue by day, with the best margin day.

A large total with an area chart along the bottom, as a hero number at the top of a dashboard.

What people did across a workspace, newest first and grouped by day.

The history of one record as a timeline, with each change shown from the old value to the new one and comments quoted in full.

Notifications in All, Mentions and Unread tabs, with each marked read when opened or all at once.

A week of activity as daily bars with the busiest day labelled, by kind, with the most active people.

Slack and GitHub activity in one timeline, with quoted messages and actions such as starting a review.

An API quota with its status, when it resets and the usage it is on pace for, with the date it would hit the limit.

Storage used as a ring in its status colour, with the space that is free.

Usage against what the plan includes, with the overage past the limit and what it will cost.

A credit balance with the days left, the date it runs out and recent daily use against the average.

Storage split into categories as one segmented bar, with each category's size and share, and the space that is free.

Every limit on a plan, flagging the ones nearly reached and prompting an upgrade.

What is left as a liquid that drains as usage grows, turning orange and then red.

What is left as a round wave that drains as usage grows, with used, free and days until reset below.

Ranked rows with a background bar sized relative to the leader.

People ranked by revenue with a bar to their quota and the change since the last period.

The top three on a podium sized by their totals, with the rest of the field listed below.

Products ranked by revenue with how far each moved in the ranking since the last period.

A ranked list that can be reversed and expanded to show every entry.

This period's area against the previous period's dashed line, with the change written as a sentence.

Tabs for related metrics, each showing its total and change, over a chart of the chosen one with its average.

Monthly totals as stacked bars split by category, with the average and the latest total labelled.

A single series of bars with the latest period highlighted and labelled, against a goal line.

A donut splitting a total into parts, with each value and share listed beside it.

Several ordered lines, such as percentiles, in one hue from light to full strength, labelled at their ends, against an SLO line.

A single 100% bar splitting a total into categories, with each value and share listed below.

One bar per group showing its mix of categories, sorted by a chosen category's share, which is labelled on every row.

A 10 by 10 grid of squares where each square is 1% of the total, coloured by category.

How each category's share of a total moved between two periods, as a dot for each period joined by a line.

Each stage as a bar sized against the first, with the conversion at each step and overall.

Stages as columns against a 0 to 100% axis, each topped by the share that left at that step, with the biggest drop named.

A vertical stepper through the stages that calls out the step with the biggest drop-off.

Two segments as lines through every stage, each as a share of its first step, with the gap between them shaded.

Each service with its current status, the worst one above the title, and a sentence naming the services that are not operational.

Ninety days of daily status for each service as a row of bars, with a tooltip for any day.

An active incident with its severity, affected components and a timeline of updates.

Regions, each with its status, p95 latency bar and error rate.

One service's uptime, incident count and downtime, with its daily history and recent incidents.

Metrics side by side, each with its change written as a sentence.

A row of metrics, each with its change and a 14-day sparkline, under a sentence saying how many improved.

A row of metrics where picking one charts it by day against the previous period.

Five metrics in a slim row with their changes, wrapping to two columns when narrow.

Four metrics, each with a bar for this period over a bar for the one before.

A dashboard header with a title, date range presets, a compare switch, removable filter chips, an add filter menu and export.

A short dashboard header with a title, a date range menu and an export button.

A dashboard header with date range presets as a segmented control, a compare switch and a filter chip.

A dashboard header with a description, the time of the last update and a refresh button beside the date range and export.

A table of rows with sortable column headers.

Revenue by product, each with a bar scaled to the top product and its share of the total.

Campaign conversions and cost per conversion, each with its change and a 14-day sparkline.

Services in a table with their status, latency and error rate, worst status first.

A table of recent orders split into pages of five, with controls to move between them.

A searchable table with status and plan filters, a column menu, page sizes and row selection to export or email.

When visitors arrive, as a grid of weekday by hour, darker where there are more.

The share of each weekly signup cohort still active in each week after signup, as a shaded grid.

A year of daily values as a calendar grid, darker on busier days.

The p95 latency of each endpoint by hour over the last day, darker where it is slower.

Grey placeholders shaped like a row of stats, shown while data loads so nothing shifts when it arrives.

A chart that stays in place at reduced opacity while it refreshes, with an updating indicator in the header.

A filtered table with no matching rows, explaining why it is empty and offering a way out.

A chart that loads its own data and, when the request fails, says so where the number and the chart go.

A store dashboard: header filters scope stats, revenue, channels, products, a checkout funnel and month-to-date revenue, with low stock alongside.

A SaaS dashboard: metric tabs, an activity heatmap, MRR by region, MRR movement, retention milestones and service status, filtered by plan.

A web analytics dashboard: traffic tabs, visitors right now, a traffic flow, top pages, top countries and browsers, filtered by device.

A CRM dashboard: sales stats, open pipeline by stage, monthly bookings, lead conversion, a quarter forecast by rep, deal activity and stuck deals, filtered by …

A DevOps dashboard: live throughput, delivery performance, response time percentiles, open alerts, uptime, build health and recent deployments, filtered by ser…

One target with an expected-by-today marker, the projection at the current pace hatched on the bar, and what is left to do each day.

Several goals for the same period, each with its own pace.

Cumulative progress this month, projected to the end of the month at the current daily rate, with the day it reaches the target or how far short it ends.

Small daily goals as rings, with what is left to do or how far past the goal each one is.

Each metric this period and last, with the difference and the change, under a sentence saying how many improved.

The lift of a variant over the control, with a 95% confidence interval drawn against zero and what it means.

The net change, then the change in each segment as bars either side of zero, from the biggest gain to the biggest drop.

Two values per row on a shared scale, a hollow dot for before and a filled one for after, with the rows that got worse in grey.

Open alerts, most recent first, each with a button to acknowledge it.

A metric over the last hour against its threshold line, with the current value, the peak and actions to take.

A table of alert rules with their conditions, severities and channels, and a switch to pause or resume each one.

A slim strip with open alerts by severity and the latest one, for the top of a dashboard.

Revenue by US state as a tile map on a single-hue scale, with the total and the top five states.

The leading countries with flags, values and shares, and the rest summed into one row.

Active users by city right now as markers sized by value on a dotted world map, with the busiest city named.

Revenue split across regions, each with its share and its change on the previous quarter.

Starting to ending monthly recurring revenue as a waterfall chart, with ending MRR against the start of the month, net new revenue and net revenue retention.

The current plan and its price, when it renews, the next invoice and the payment method on file, with actions to manage them.

Recent invoices with their status and amount, what is outstanding and a PDF download for each one.

Monthly and annual recurring revenue, revenue per account and net revenue retention, each with its change from the previous month.

Plans side by side, monthly or yearly, with seats, what is due today and what a downgrade takes away.

A list of plain-language insights, each with its kind as a coloured word, its topic, the key figures picked out, an optional line on the drivers and a link to …

An unusual reading against the range it was expected to fall in, with the days outside it shaded, the worst day labelled on the chart, the explanation and like…

What contributed to a change, as bars either side of zero, with a sentence naming the biggest driver and the biggest drag.

A short weekly summary with a headline, three takeaways and buttons to say whether it helped.

A board with a column for each stage showing its item count and total value, and a card for each item that can be moved from its menu.

Open value across stages, with each stage as a segment sized by value or by count.

Items that have been in a stage longer than expected, longest first, with how long they have waited and who owns them.

Closed and open deals weighted by the chance each stage closes, per owner, against their quota.

Upcoming events grouped by day, as Today, Tomorrow and then weekdays, with the event in progress marked.

A month calendar with a dot on each day that has events, and a list of the events on the selected day.

Deadlines and renewals in date order, each with a countdown and an urgency badge.

The next seven days on a shared time axis, with how many events each day holds and how much of it is booked.

A list of members with their role, whether they are online and when they were last active.

Work assigned to each person against their capacity on a shared scale, with anyone over capacity flagged and listed first.

How many people are online, with their avatars and the team split by presence.

Who is on call now and until when, who is next, and the rest of the rota.

A grid of what each role can do, with permissions in rows and roles in columns, unsaved changes highlighted and a save bar that shows once something changes.

A share panel for inviting people with view or edit access, changing or removing it, and choosing who the link works for.

Setup steps with a progress bar, where each step expands to show what it involves and the current step has its action.

The stages of a multi-stage setup as a row of rules, side by side when wide and stacked when narrow.

A small block with how many setup steps are done and the next one, to bring people back to finish.

Tasks grouped by team with owners, due dates and checkboxes, with overdue and due-soon tasks written in colour.

A net promoter score on its full −100 to 100 scale, with the split of promoters, passives and detractors.

A health score weighted from its contributing factors, marked on poor, fair and good bands, with the factors that pull it down most.

CPU, memory and disk as small gauges, each in the colour of its band with warning and critical thresholds marked.

A satisfaction score on an arc with a target tick, the change since last period and the gap to target.

A list of metrics with their change and a 14-day sparkline each.

Metrics grouped into sections, each with a header and a count of how many improved.

Metrics against their targets, each with a bar, a tick at the target and a status.

A list of metrics where picking one charts it beside the list, against its 30-day average.

Weekly actuals continuing into a dashed forecast, with a shaded 80% range and a marker for today.

The running total heading for a goal line, with the forecast, its 80% range, the deadline and the date it gets there.

Month to date, projected to the end of the month at the daily run-rate, with what is needed per day to hit the target.

Low, base and high growth scenarios from the last actual, as a chart and a table with when each one reaches the target.

A retention triangle with a row per cohort and a weighted average row, shaded by share.

Every cohort's retention curve, with one highlighted against the average and where the average levels off.

Day 1, 7 and 30 retention for the latest cohort, with the change against the cohort before written out.

Users gained above the axis and lost below it, with the net change and the quick ratio.

Response times in buckets that widen as times grow, with p50, p95 and p99 lines, the buckets over the target in red and the share over it as the headline.

A box and whiskers per group on a shared axis, to compare spread and median across groups.

The median, mean and percentiles of a set of values, with a note when a long tail pulls the mean away.

This week's distribution against last week's as a dashed line, with both medians and the change at the median and p90.

Spend so far against the month's budget, with the projected month end and what is left to spend per day.

The total spent and where it is heading, then one budget bar per service, naming the ones over budget.

Monthly spend as bars against a stepped budget line, with months over budget in red and labelled with the overspend, and the year-to-date variance.

The cash balance, the average net burn and the months of runway left, with the balance projected to the month it runs out.

Sessions from each source through the landing page, to signing up, browsing on or bouncing.

Where visitors go in their first pages after landing, with the ones who left at each step.

Revenue streams into total revenue, then out to costs and profit, with each part's share of revenue.

The most common routes as steps, ranked by how many people took them, with how often each reaches the goal.

Projects grouped by team, each a bar from start to end filled to its progress, with a line for today.

A launch plan as a list on a rail, with the next milestone highlighted and how soon or how late each one is.

Every release on one line, sized as major, minor or patch, with the median gap and when the next one is due.

Each phase's plan as a dashed outline with what actually happened as a bar beneath it, and how many days it slipped.

Active users now, page views per second over the last minute and the pages with the most people on them.

Requests per second over the last five minutes, with the peak, the error rate and errors on their own scale.

Orders, sign-ups, refunds and messages as they arrive, newest first, with a pause button.

Running totals since midnight against yesterday at the same time, with orders per hour beside yesterday as a dashed line.

The average rating as stars, the number of ratings and the share of each star, with the change on the last period and the share rating 4 or 5.

A diverging bar chart of negative and positive mentions for each topic, sorted by net sentiment, with the best and worst topic in a sentence.

The latest reviews with their rating and source, flagging low ratings still waiting for a reply.

Weekly customer satisfaction against a target, with the change on the week before and how many weeks met it.

The latest builds, each with its commit, environment, author, duration and status.

What each environment is running, and how many commits are waiting to be promoted to the next one.

The four DORA delivery metrics, each with its performance band and the change on the previous period.

The latest runs of each pipeline as a strip of results, with the pass rate and median duration.

Pages plotted by load time and conversion rate, grouped by section, with a trend line and how strong the link is.

Features plotted by usage and satisfaction, split into four labelled quadrants with each point named.

Campaigns plotted by cost per acquisition and conversion rate, sized by spend and coloured by channel, against a target cost.

Open risks on a likelihood by impact grid, shaded by level, with the risks in a selected cell listed.

Failed and blocked sign-ins per day against a typical day, with the failure rate, the spike in blocked attempts called out, and two-factor coverage.

Changes to access, keys and settings, newest first, with a switch to show warnings only.

The devices signed in to an account, with where and when each was last active, and buttons to sign them out.

A security score on a banded gauge, built from workspace checks, with failing checks first and what to do about each.

Setting up two-factor sign-in with an authenticator app, security keys and passkeys, and recovery codes shown once.

A single sign-on connection with details to copy into your identity provider, verified domains, and a switch to require it.

Items at or near their reorder point, soonest to run out first, with how much to order and which will run out before an order arrives.

Units stored against capacity in each warehouse, with what arrives this week and which will be nearly full.

Every SKU by stock status, with the value of stock on hand and how many times a year it turns over.

One item's stock day by day at its current demand, with incoming orders, the reorder point and when it runs out.

Tokens per day stacked by model against the daily average, with the total cost and the cost per million tokens; hovering a day splits it by model.