{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "dashboardblocks", "homepage": "https://www.dashboardblocks.com", "items": [ { "name": "activity-feed", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/format.json" ], "title": "Activity Feed", "description": "Primitives for activity feeds: a list with connectors that line up with the markers, tinted icons by tone, an unread dot, a Mark all as read button, relative times and \"Today\" and \"Yesterday\" day headings that take a fixed now and a time zone, and grouping by day.", "files": [ { "path": "registry/components/dashboardblocks/activity-feed.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed.tsx" } ] }, { "name": "ai-usage", "type": "registry:component", "title": "AI Usage", "description": "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, model colours in a fixed order and an input, cached and output token bar.", "registryDependencies": [ "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-usage.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-usage.tsx" } ] }, { "name": "alerts", "type": "registry:component", "title": "Alerts", "description": "Primitives for alerts: critical, warning, info and resolved severities written as coloured words, plus relative time formatting.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/alerts.tsx", "type": "registry:component", "target": "@components/dashboardblocks/alerts.tsx" } ] }, { "name": "animated-number", "type": "registry:component", "title": "Animated Number", "description": "An animated number component.", "registryDependencies": [ "https://www.dashboardblocks.com/r/use-animated-number.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/animated-number.tsx", "type": "registry:component", "target": "@components/dashboardblocks/animated-number.tsx" } ] }, { "name": "animated-wave", "type": "registry:component", "title": "Animated Wave", "description": "An animated wave component.", "files": [ { "path": "registry/components/dashboardblocks/animated-wave.tsx", "type": "registry:component", "target": "@components/dashboardblocks/animated-wave.tsx" } ] }, { "name": "app-shell", "type": "registry:component", "title": "App Shell", "description": "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 workspace switcher, sidebar and avatar user menus, a top bar, breadcrumbs, a search button with a keyboard shortcut, a notifications bell, a side panel with its header button, plan usage, a top navigation row, and a sidebar layout whose links stay in view while its content scrolls.", "registryDependencies": [ "avatar", "breadcrumb", "button", "collapsible", "dropdown-menu", "kbd", "sheet", "sidebar", "tooltip", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/app-shell.tsx", "type": "registry:component", "target": "@components/dashboardblocks/app-shell.tsx" }, { "path": "registry/hooks/use-mobile.ts", "type": "registry:hook", "target": "@hooks/use-mobile.ts" } ] }, { "name": "chart", "type": "registry:component", "title": "Chart", "description": "Chart components.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart.tsx" } ] }, { "name": "auth", "type": "registry:component", "title": "Auth", "description": "Primitives for signing in and joining a workspace: a full-page frame with one narrow centred card, the icon over a page's title, a one-time code input with a box per digit that handles paste, autofill and Backspace, a password input you can show, a password strength meter with the rules it still needs, a row of sign-in providers, a send-again button that counts down, the row at the bottom that leads to another way in, a square workspace avatar with a logo, a mark or initials, and an email masking helper.", "registryDependencies": [ "button", "card", "input", "input-group", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/rolling-text.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth.tsx" } ] }, { "name": "billing", "type": "registry:component", "title": "Billing", "description": "Primitives for subscription billing: billing dates, MRR movement from starting to ending MRR, net revenue retention, a waterfall chart of the movement and an invoice status label.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing.tsx" } ] }, { "name": "block-state", "type": "registry:component", "title": "Block State", "description": "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 a data-loading hook.", "files": [ { "path": "registry/components/dashboardblocks/block-state.tsx", "type": "registry:component", "target": "@components/dashboardblocks/block-state.tsx" } ] }, { "name": "breakdown", "type": "registry:component", "title": "Breakdown", "description": "Primitives for part-to-whole breakdowns: a segmented 100% bar, legend keys and share formatting.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/breakdown.tsx", "type": "registry:component", "target": "@components/dashboardblocks/breakdown.tsx" } ] }, { "name": "chart-panel", "type": "registry:component", "title": "Chart Panel", "description": "Primitives for full-size chart panels: tooltip, legend, axis defaults and an accessible data table.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel.tsx" } ] }, { "name": "checklist", "type": "registry:component", "title": "Checklist", "description": "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 that leave skipped steps out, and a styled checkbox.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/checklist.tsx", "type": "registry:component", "target": "@components/dashboardblocks/checklist.tsx" } ] }, { "name": "table", "type": "registry:component", "title": "Table", "description": "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 density for a small table in a headline block, rows that open a record or a page on click, a sticky first column, a sideways scroller, inline bars, a pager, and loading, empty and error rows.", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/link.json" ], "files": [ { "path": "registry/components/dashboardblocks/table.tsx", "type": "registry:component", "target": "@components/dashboardblocks/table.tsx" } ] }, { "name": "data-table", "type": "registry:component", "title": "Data Table", "description": "Dashboard tables on TanStack Table: sorting, search, facet filters, pagination, row selection and column visibility, with inline bars, scrolling sideways when wider than its card.", "dependencies": [ "@tanstack/react-table@^9.2.4" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "button", "checkbox", "dropdown-menu", "input", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table.tsx" } ] }, { "name": "command-menu", "type": "registry:component", "title": "Command Menu", "description": "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 and a searching state, a search button with ⌘K, and a shortcut hook.", "registryDependencies": [ "button", "command", "kbd" ], "files": [ { "path": "registry/components/dashboardblocks/command-menu.tsx", "type": "registry:component", "target": "@components/dashboardblocks/command-menu.tsx" } ] }, { "name": "comparison", "type": "registry:component", "title": "Comparison", "description": "Primitives for comparisons: deltas, a two-proportion test with a 95% interval, diverging bars, dumbbells and an interval bar.", "registryDependencies": [ "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/comparison.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comparison.tsx" } ] }, { "name": "dashboard-header", "type": "registry:component", "title": "Dashboard Header", "description": "Primitives for dashboard headers: a date range preset menu, a compare switch, filter menus, filter chips and an export menu.", "registryDependencies": [ "button", "dropdown-menu", "switch", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboard-header.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboard-header.tsx" } ] }, { "name": "deployments", "type": "registry:component", "title": "Deployments", "description": "Primitives for deployments: ready, failed, building, queued and rolled back statuses written as coloured words, duration and short commit formatting, DORA bands for deployment frequency, lead time, change failure rate and time to restore, a DORA band label and a run history strip.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/deployments.tsx", "type": "registry:component", "target": "@components/dashboardblocks/deployments.tsx" } ] }, { "name": "distribution", "type": "registry:component", "title": "Distribution", "description": "Primitives for distributions: quantiles from raw values or from binned counts, binning, a five-number summary, the share above a limit, round ticks, a histogram with labelled percentile and threshold lines and a line for an earlier period, box plots and legend keys.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json" ], "files": [ { "path": "registry/components/dashboardblocks/distribution.tsx", "type": "registry:component", "target": "@components/dashboardblocks/distribution.tsx" } ] }, { "name": "email", "type": "registry:component", "title": "Email", "description": "Primitives for emails built with React Email: a layout with your brand and footer, a title with a sentence, a dark panel for the one thing the email is about with its value, a money value with smaller cents, a usage meter drawn as table cells, a note and a button, sections a rule opens, label and value rows with a total, and a render helper that returns the HTML and its plain-text copy.", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email-theme.json" ], "files": [ { "path": "registry/components/dashboardblocks/email.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email.tsx" } ] }, { "name": "email-theme", "type": "registry:lib", "title": "Email Theme", "description": "Your shadcn theme for emails: paste the :root and .dark blocks of your globals.css, and every email uses the same colour names as your app, turned into values mail apps can read.", "dependencies": [ "react-email" ], "files": [ { "path": "registry/lib/dashboardblocks/email-theme.ts", "type": "registry:lib", "target": "@lib/dashboardblocks/email-theme.ts" } ] }, { "name": "error-pages", "type": "registry:component", "title": "Error Pages", "description": "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 UTC time and duration formatting.", "files": [ { "path": "registry/components/dashboardblocks/error-pages.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages.tsx" } ] }, { "name": "feedback", "type": "registry:component", "title": "Feedback", "description": "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 to a fractional rating, and a recharts diverging bar chart of sentiment by topic with a tooltip.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/feedback.tsx", "type": "registry:component", "target": "@components/dashboardblocks/feedback.tsx" } ] }, { "name": "flow", "type": "registry:component", "title": "Flow", "description": "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 connects, with a tooltip, plus path steps joined by arrows.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/flow.tsx", "type": "registry:component", "target": "@components/dashboardblocks/flow.tsx" } ] }, { "name": "forecast", "type": "registry:component", "title": "Forecast", "description": "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 projection bar, legend keys, a tooltip and a status label.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/forecast.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forecast.tsx" } ] }, { "name": "forms", "type": "registry:component", "title": "Forms", "description": "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 section, a sticky save bar, wizard steps, a form in a side sheet, an inline edit field and an email check.", "registryDependencies": [ "button", "input", "input-group", "sheet", "https://www.dashboardblocks.com/r/checklist.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms.tsx" } ] }, { "name": "format", "type": "registry:lib", "title": "Format", "description": "en-US formatting for numbers, compact numbers, currency, percentages from ratios, signed differences with a real minus, percentage points, UTC date ranges and details joined with a middle dot.", "files": [ { "path": "registry/lib/dashboardblocks/format.ts", "type": "registry:lib", "target": "@lib/dashboardblocks/format.ts" } ] }, { "name": "funnel", "type": "registry:component", "title": "Funnel", "description": "Primitives for conversion funnels: step conversion maths, the biggest drop and a stage bar.", "registryDependencies": [ "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/use-reveal.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/funnel.tsx", "type": "registry:component", "target": "@components/dashboardblocks/funnel.tsx" } ] }, { "name": "gauge", "type": "registry:component", "title": "Gauge", "description": "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 labels as coloured words, plus band, weighted score and NPS helpers.", "registryDependencies": [ "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/gauge.tsx", "type": "registry:component", "target": "@components/dashboardblocks/gauge.tsx" } ] }, { "name": "address-fields", "type": "registry:component", "title": "Address Fields", "description": "Country first, then the fields its addresses use, named its way and in its order, with a list of states or provinces where the country has one and a check of the postal code.", "registryDependencies": [ "field", "input", "https://www.dashboardblocks.com/r/countries.json", "https://www.dashboardblocks.com/r/country-flag.json", "https://www.dashboardblocks.com/r/option-select.json" ], "files": [ { "path": "registry/components/dashboardblocks/address-fields.tsx", "type": "registry:component", "target": "@components/dashboardblocks/address-fields.tsx" } ] }, { "name": "countries", "type": "registry:lib", "title": "Countries", "description": "Every country’s two-letter code and English name, in alphabetical order.", "files": [ { "path": "registry/lib/dashboardblocks/countries.ts", "type": "registry:lib", "target": "@lib/dashboardblocks/countries.ts" } ] }, { "name": "country-flag", "type": "registry:component", "title": "Country Flag", "description": "A country's flag from its two-letter code, drawn as SVG so it shows on Windows too, with a globe for a code it has no flag for.", "dependencies": [ "country-flag-icons" ], "files": [ { "path": "registry/components/dashboardblocks/country-flag.tsx", "type": "registry:component", "target": "@components/dashboardblocks/country-flag.tsx" } ] }, { "name": "geo", "type": "registry:component", "title": "Geo", "description": "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 tooltip, a marker size legend and country flags.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/country-flag.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/geo.tsx", "type": "registry:component", "target": "@components/dashboardblocks/geo.tsx" } ] }, { "name": "goals", "type": "registry:component", "title": "Goals", "description": "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 pace as a coloured word.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/goals.tsx", "type": "registry:component", "target": "@components/dashboardblocks/goals.tsx" } ] }, { "name": "heatmap", "type": "registry:component", "title": "Heatmap", "description": "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, dots on flagged cells, a ripple out from one cell, and a legend.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/heatmap.tsx", "type": "registry:component", "target": "@components/dashboardblocks/heatmap.tsx" } ] }, { "name": "icon", "type": "registry:component", "title": "Icon", "description": "An icon component.", "dependencies": [ "class-variance-authority" ], "files": [ { "path": "registry/components/dashboardblocks/icon.tsx", "type": "registry:component", "target": "@components/dashboardblocks/icon.tsx" } ] }, { "name": "insights", "type": "registry:component", "title": "Insights", "description": "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 \"why\" line of drivers.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/insights.tsx", "type": "registry:component", "target": "@components/dashboardblocks/insights.tsx" } ] }, { "name": "inventory", "type": "registry:component", "title": "Inventory", "description": "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 reorder quantity for the lead time plus a target, and a stock bar with a reorder point tick.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/inventory.tsx", "type": "registry:component", "target": "@components/dashboardblocks/inventory.tsx" } ] }, { "name": "kpi", "type": "registry:component", "title": "KPI", "description": "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 percent or percentage points with the good direction, a chart wrapper with a text alternative, and named en-US formats.", "registryDependencies": [ "https://www.dashboardblocks.com/r/change-amount.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi.tsx" } ] }, { "name": "kpi-provenance", "type": "registry:component", "title": "KPI Provenance", "description": "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.", "registryDependencies": [ "button", "popover", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi-provenance.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi-provenance.tsx" }, { "path": "registry/components/dashboardblocks/kpi-provenance-format.ts", "type": "registry:component", "target": "@components/dashboardblocks/kpi-provenance-format.ts" } ] }, { "name": "leaderboard", "type": "registry:component", "title": "Leaderboard", "description": "Primitives for composing ranked lists and leaderboards.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/change-amount.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard.tsx" } ] }, { "name": "link", "type": "registry:component", "title": "Link", "description": "A link provider that makes every primitive render your router's link, for client-side navigation, with plain anchors as the default.", "files": [ { "path": "registry/components/dashboardblocks/link.tsx", "type": "registry:component", "target": "@components/dashboardblocks/link.tsx" } ] }, { "name": "metric-list", "type": "registry:component", "title": "Metric List", "description": "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 formatting helpers.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/metric-list.tsx", "type": "registry:component", "target": "@components/dashboardblocks/metric-list.tsx" } ] }, { "name": "notifications", "type": "registry:component", "title": "Notifications", "description": "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 own buttons still work, with relative times and an unread dot.", "registryDependencies": [ "button", "popover", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/notifications.tsx", "type": "registry:component", "target": "@components/dashboardblocks/notifications.tsx" } ] }, { "name": "tag", "type": "registry:component", "title": "Tag", "description": "A small tinted tag for a count or short word beside a sidebar link, tab, menu item or group heading, or an item's label with its dot: neutral, or a status tone when it needs attention.", "registryDependencies": [ "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/tag.tsx", "type": "registry:component", "target": "@components/dashboardblocks/tag.tsx" } ] }, { "name": "page-header", "type": "registry:component", "title": "Page Header", "description": "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 doesn’t fit under More, and a more-actions menu.", "registryDependencies": [ "button", "dropdown-menu", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/page-header.tsx", "type": "registry:component", "target": "@components/dashboardblocks/page-header.tsx" } ] }, { "name": "pipeline", "type": "registry:component", "title": "Pipeline", "description": "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 card, an owner with their photo and age formatting.", "registryDependencies": [ "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/pipeline.tsx", "type": "registry:component", "target": "@components/dashboardblocks/pipeline.tsx" } ] }, { "name": "progress-bar", "type": "registry:component", "title": "Progress Bar", "description": "A progress bar component.", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/use-in-view.json" ], "files": [ { "path": "registry/components/dashboardblocks/progress-bar.tsx", "type": "registry:component", "target": "@components/dashboardblocks/progress-bar.tsx" } ] }, { "name": "realtime", "type": "registry:component", "title": "Realtime", "description": "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 motion, a number that counts to each new value, rolling bars on recharts and a short time-ago format.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/realtime.tsx", "type": "registry:component", "target": "@components/dashboardblocks/realtime.tsx" } ] }, { "name": "record-detail", "type": "registry:component", "title": "Record Detail", "description": "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 and a list of labelled properties.", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/record-detail.tsx", "type": "registry:component", "target": "@components/dashboardblocks/record-detail.tsx" } ] }, { "name": "retention", "type": "registry:component", "title": "Retention", "description": "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 with a hover tooltip, a bar and a change in percentage points.", "registryDependencies": [ "https://www.dashboardblocks.com/r/change-amount.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/retention.tsx", "type": "registry:component", "target": "@components/dashboardblocks/retention.tsx" } ] }, { "name": "ring", "type": "registry:component", "title": "Ring", "description": "A ring component.", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/use-in-view.json" ], "files": [ { "path": "registry/components/dashboardblocks/ring.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ring.tsx" } ] }, { "name": "scatter", "type": "registry:component", "title": "Scatter", "description": "Primitives for scatter plots and matrices: a least-squares line with the correlation coefficient described in words, a median, categorical colours in a fixed order, point tooltip content, and risk levels from likelihood and impact with a labelled swatch.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json" ], "files": [ { "path": "registry/components/dashboardblocks/scatter.tsx", "type": "registry:component", "target": "@components/dashboardblocks/scatter.tsx" } ] }, { "name": "schedule", "type": "registry:component", "title": "Schedule", "description": "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.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/schedule.tsx", "type": "registry:component", "target": "@components/dashboardblocks/schedule.tsx" } ] }, { "name": "security", "type": "registry:component", "title": "Security", "description": "Primitives for security: info, warning and critical audit severities and passing, attention and failing check results as coloured words, a desktop or phone device icon, and a weighted security score.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/security.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security.tsx" } ] }, { "name": "settings", "type": "registry:component", "title": "Settings", "description": "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 beside its control, connected, needs attention, paused and not connected statuses each with an icon and label, secret masking, a copy button that announces itself, and relative and UTC date formatting.", "registryDependencies": [ "button", "dropdown-menu", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings.tsx" } ] }, { "name": "spend", "type": "registry:component", "title": "Spend", "description": "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 with overspend and a striped projection, the status as a coloured word, and legend keys.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/spend.tsx", "type": "registry:component", "target": "@components/dashboardblocks/spend.tsx" } ] }, { "name": "option-select", "type": "registry:component", "title": "Option Select", "description": "A select for one value from a list of options, each with an optional icon such as a flag, with a placeholder, built on the shadcn Select so its menu follows your style and font.", "registryDependencies": [ "select" ], "files": [ { "path": "registry/components/dashboardblocks/option-select.tsx", "type": "registry:component", "target": "@components/dashboardblocks/option-select.tsx" } ] }, { "name": "multi-select", "type": "registry:component", "title": "Multi-select", "description": "A field for several values from a searchable list, shown as chips you can remove, built on the shadcn Combobox so its list follows your style and font.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "button", "combobox" ], "files": [ { "path": "registry/components/dashboardblocks/multi-select.tsx", "type": "registry:component", "target": "@components/dashboardblocks/multi-select.tsx" } ] }, { "name": "choice-cards", "type": "registry:component", "title": "Choice Cards", "description": "One or several options drawn as cards on native radio and checkbox inputs, each with its title, a line of detail, an optional icon, a label and a value to compare, such as a price.", "registryDependencies": [ "field", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/choice-cards.tsx", "type": "registry:component", "target": "@components/dashboardblocks/choice-cards.tsx" } ] }, { "name": "number-field", "type": "registry:component", "title": "Number Field", "description": "A number with its unit or currency, formatted when the field loses focus, kept between its minimum and maximum, with arrow keys and optional minus and plus buttons.", "registryDependencies": [ "input-group", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/number-field.tsx", "type": "registry:component", "target": "@components/dashboardblocks/number-field.tsx" } ] }, { "name": "brand-logos", "type": "registry:component", "title": "Brand Logos", "description": "Logos of the services people sign in with or connect, and of the AI model makers and hosts a gateway routes to (OpenAI, Anthropic, Google Gemini, xAI, Mistral, Meta, Amazon Bedrock, Vertex AI, Groq and more), sized like an icon.", "files": [ { "path": "registry/components/dashboardblocks/brand-logos.tsx", "type": "registry:component", "target": "@components/dashboardblocks/brand-logos.tsx" } ] }, { "name": "change-amount", "type": "registry:component", "title": "Change Amount", "description": "A change written as an up or down arrow and its amount, with the direction read out to screen readers.", "files": [ { "path": "registry/components/dashboardblocks/change-amount.tsx", "type": "registry:component", "target": "@components/dashboardblocks/change-amount.tsx" } ] }, { "name": "details", "type": "registry:component", "title": "Details", "description": "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.", "files": [ { "path": "registry/components/dashboardblocks/details.tsx", "type": "registry:component", "target": "@components/dashboardblocks/details.tsx" } ] }, { "name": "announcements", "type": "registry:component", "title": "Announcements", "description": "What a block says to screen readers about a result: a polite status region that keeps the last three messages, each read once.", "files": [ { "path": "registry/components/dashboardblocks/announcements.tsx", "type": "registry:component", "target": "@components/dashboardblocks/announcements.tsx" } ] }, { "name": "attempt", "type": "registry:lib", "title": "Attempt", "description": "Runs a request and reads a throw as a refusal that says to check the connection, since a refusal resolves.", "files": [ { "path": "registry/lib/dashboardblocks/attempt.ts", "type": "registry:lib", "target": "@lib/dashboardblocks/attempt.ts" } ] }, { "name": "shortcut-button", "type": "registry:component", "title": "Shortcut Button", "description": "A button whose tooltip shows its label and its keyboard shortcut. With `listen`, the key presses it from anywhere on the page, except while someone types or a menu or dialog is open.", "registryDependencies": [ "button", "kbd", "tooltip" ], "files": [ { "path": "registry/components/dashboardblocks/shortcut-button.tsx", "type": "registry:component", "target": "@components/dashboardblocks/shortcut-button.tsx" } ] }, { "name": "panel-controls", "type": "registry:component", "title": "Panel Controls", "description": "Previous, Next and Close for a panel opened beside a list, pressed with K, J and Esc from anywhere on the page.", "registryDependencies": [ "https://www.dashboardblocks.com/r/shortcut-button.json" ], "files": [ { "path": "registry/components/dashboardblocks/panel-controls.tsx", "type": "registry:component", "target": "@components/dashboardblocks/panel-controls.tsx" } ] }, { "name": "resizable-split", "type": "registry:component", "title": "Resizable Split", "description": "Two panes side by side, such as a chat and the document it writes, with a line between them that people drag, or move with the arrow keys, to share the width.", "registryDependencies": [ "resizable" ], "files": [ { "path": "registry/components/dashboardblocks/resizable-split.tsx", "type": "registry:component", "target": "@components/dashboardblocks/resizable-split.tsx" } ] }, { "name": "tooltip-link", "type": "registry:component", "title": "Tooltip Link", "description": "An icon that links somewhere, drawn as a ghost icon button, with its label in a tooltip, such as Open as a page in a panel’s bar.", "registryDependencies": [ "button", "tooltip", "https://www.dashboardblocks.com/r/link.json" ], "files": [ { "path": "registry/components/dashboardblocks/tooltip-link.tsx", "type": "registry:component", "target": "@components/dashboardblocks/tooltip-link.tsx" } ] }, { "name": "agent-ring", "type": "registry:component", "title": "Agent Ring", "description": "A ring that shows how work is going: an arc spins while it runs, the ring pulses while it waits for a person, and it closes into a tick, an exclamation mark, a cross or a dash once done, warning, failed or stopped. Also `AgentMark`, an agent’s initials in its ring.", "registryDependencies": [ "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/agent-ring.tsx", "type": "registry:component", "target": "@components/dashboardblocks/agent-ring.tsx" } ] }, { "name": "rolling-text", "type": "registry:component", "title": "Rolling Text", "description": "Text that rolls up to its next value: the old text slides out the top as the new one slides in, and it swaps in place under reduced motion.", "files": [ { "path": "registry/components/dashboardblocks/rolling-text.tsx", "type": "registry:component", "target": "@components/dashboardblocks/rolling-text.tsx" } ] }, { "name": "status-label", "type": "registry:component", "title": "Status Label", "description": "A status written as a coloured word: good, warning, bad, info and neutral tones in the shades every block uses.", "files": [ { "path": "registry/components/dashboardblocks/status-label.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status-label.tsx" } ] }, { "name": "stat-group", "type": "registry:component", "title": "Stat Group", "description": "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.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/trend.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group.tsx" } ] }, { "name": "status", "type": "registry:component", "title": "Status", "description": "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.", "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/status.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status.tsx" } ] }, { "name": "team", "type": "registry:component", "title": "Team", "description": "Primitives for people: avatars with initials and a colour picked from the name, presence as a dot on the avatar and a coloured word, an avatar stack with a \"+N\" overflow, and a workload bar of what someone has against what they can take.", "registryDependencies": [ "avatar", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/team.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team.tsx" } ] }, { "name": "timeline", "type": "registry:component", "title": "Timeline", "description": "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 with an icon and label, an axis tick, a today label, a chart of dated rows with tooltips, and a Gantt-style timeline with grouped rows and progress fills.", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/details.json" ], "files": [ { "path": "registry/components/dashboardblocks/timeline.tsx", "type": "registry:component", "target": "@components/dashboardblocks/timeline.tsx" } ] }, { "name": "trend", "type": "registry:component", "title": "Trend", "description": "A trend indicator component.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/trend.tsx", "type": "registry:component", "target": "@components/dashboardblocks/trend.tsx" } ] }, { "name": "usage-meter", "type": "registry:component", "title": "Usage Meter", "description": "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 share used, usage projected to the end of the period, days left at a daily rate, en-US number formatting, and a usage bar with overage, a striped projection and a limit tick.", "registryDependencies": [ "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/use-reveal.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter.tsx" } ] }, { "name": "kanban", "type": "registry:component", "title": "Kanban", "description": "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 or block and collapsing, cards with a move menu, labels, assignees, due dates, priorities, stats and subtasks, an inline add-card form and a helper that moves a card in your array.", "registryDependencies": [ "avatar", "button", "dropdown-menu", "input", "kbd", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/schedule.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/kanban.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kanban.tsx" } ] }, { "name": "comments", "type": "registry:component", "title": "Comments", "description": "Primitives for comments: threads with one level of replies joined by a line, a composer that suggests people after @ and submits with ⌘ Enter, highlighted mentions, reaction toggles with an emoji picker, an edit and delete menu, and resolved threads that collapse to a summary.", "registryDependencies": [ "avatar", "button", "dropdown-menu", "input-group", "https://www.dashboardblocks.com/r/activity-feed.json" ], "files": [ { "path": "registry/components/dashboardblocks/comments.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comments.tsx" } ] }, { "name": "calendar", "type": "registry:component", "title": "Calendar", "description": "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\", week and resource views on an hour axis with overlapping events side by side and a now line, an event list for narrow screens, inline event details, a legend that can filter calendars, and date helpers for weeks, event days and lanes.", "registryDependencies": [ "button", "button-group", "tabs", "https://www.dashboardblocks.com/r/schedule.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/calendar.tsx", "type": "registry:component", "target": "@components/dashboardblocks/calendar.tsx" } ] }, { "name": "files", "type": "registry:component", "title": "Files", "description": "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 concurrency limit, ruled upload rows with a progress bar and their status in words, icons for eleven kinds of file from the name or MIME type, en-US file sizes, a file actions menu and folder breadcrumbs.", "registryDependencies": [ "button", "dropdown-menu", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/details.json" ], "files": [ { "path": "registry/components/dashboardblocks/files.tsx", "type": "registry:component", "target": "@components/dashboardblocks/files.tsx" } ] }, { "name": "text-change", "type": "registry:component", "title": "Text Change", "description": "Text a change added, tinted in the chart colour, or removed, struck through in muted text, with “added” or “removed” for screen readers.", "files": [ { "path": "registry/components/dashboardblocks/text-change.tsx", "type": "registry:component", "target": "@components/dashboardblocks/text-change.tsx" } ] }, { "name": "disclosure", "type": "registry:component", "title": "Disclosure", "description": "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.", "files": [ { "path": "registry/components/dashboardblocks/disclosure.tsx", "type": "registry:component", "target": "@components/dashboardblocks/disclosure.tsx" } ] }, { "name": "highlighted-code", "type": "registry:component", "title": "Highlighted Code", "description": "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 as a key to check. It highlights code as a model streams it.", "dependencies": [ "shiki@^4.5.0" ], "registryDependencies": [ "code-block" ], "files": [ { "path": "registry/components/dashboardblocks/highlighted-code.tsx", "type": "registry:component", "target": "@components/dashboardblocks/highlighted-code.tsx" } ] }, { "name": "ai-chat", "type": "registry:component", "title": "AI Chat", "description": "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 no HTML while it streams, each word fading in as it arrives, a reply that leads with one line rolling through what the model is doing beside a ring that spins, then folds its thinking, tool calls and sources into “Used 2 tools in 3.4 s”, tool calls with their state, approval and details, tool results drawn as blocks, attached files, and numbered sources and citations.", "dependencies": [ "marked@^18.1.0", "remend@^1.4.0" ], "registryDependencies": [ "attachment", "button", "https://www.dashboardblocks.com/r/agent-ring.json", "https://www.dashboardblocks.com/r/disclosure.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/highlighted-code.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/rolling-text.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/text-change.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-message.ts", "type": "registry:component", "target": "@components/dashboardblocks/ai-message.ts" }, { "path": "registry/components/dashboardblocks/ai-sources.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-sources.tsx" }, { "path": "registry/components/dashboardblocks/ai-markdown.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-markdown.tsx" }, { "path": "registry/lib/dashboardblocks/markdown-fences.ts", "type": "registry:lib", "target": "@lib/dashboardblocks/markdown-fences.ts" }, { "path": "registry/components/dashboardblocks/ai-parts.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-parts.tsx" } ] }, { "name": "ai-assistant", "type": "registry:component", "title": "AI Assistant", "description": "Primitives for AI chat that take the Vercel AI SDK’s useChat as it is: a panel with New conversation and Close around a welcome, the conversation and the message box, a scrolling log that puts each new question at the top with its reply growing below, opens a saved conversation at its last question and reads each reply out once it has finished, messages that show thinking, tool calls, Markdown, files and sources, copy, regenerate and feedback actions, suggested prompts, a welcome, an error with retry, context chips, a message box that attaches files, shows each one uploading, too large or of a type it can’t send, and where Enter sends and Stop halts a reply, and a hook that runs the same chat from any function that streams.", "registryDependencies": [ "https://www.dashboardblocks.com/r/announcements.json", "attachment", "bubble", "button", "input-group", "message", "message-scroller", "https://www.dashboardblocks.com/r/ai-chat.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/files.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-assistant.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-assistant.tsx" } ] }, { "name": "invoice", "type": "registry:component", "title": "Invoice", "description": "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 and balance due, a sheet that prints black on white, a toolbar hidden in print, a header, a headline amount with a sentence, parties, dates, a line items table with optional checkboxes, totals, notes and a Code 39 barcode.", "registryDependencies": [ "button", "checkbox", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/invoice.tsx", "type": "registry:component", "target": "@components/dashboardblocks/invoice.tsx" } ] }, { "name": "onboarding", "type": "registry:component", "title": "Onboarding", "description": "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, an invite list of email and role rows that splits pasted lists and checks for invalid and duplicate addresses, action rows for quick starts, and a URL slug helper.", "registryDependencies": [ "button", "field", "input", "https://www.dashboardblocks.com/r/option-select.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/link.json" ], "files": [ { "path": "registry/components/dashboardblocks/onboarding.tsx", "type": "registry:component", "target": "@components/dashboardblocks/onboarding.tsx" } ] }, { "name": "kpi-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/kpi-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/kpi-01.tsx" } ], "meta": { "shows": "A single value with its change and what it is compared with.", "size": "compact", "usedWith": [ "kpi-02", "stat-group-01", "chart-panel-01" ], "component": "KPI1", "props": "{ comparison: string; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; previous?: number; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A single value with its change and what it is compared with." }, { "name": "kpi-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/kpi-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/kpi-02.tsx" } ], "meta": { "shows": "A value with its change written beside the label, for a tight grid of KPIs.", "size": "compact", "usedWith": [ "kpi-01", "chart-panel-02", "stat-group-04" ], "component": "KPI2", "props": "{ comparison: string; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; previous?: number; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A value with its change written beside the label, for a tight grid of KPIs." }, { "name": "kpi-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/kpi-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/kpi-03.tsx" } ], "meta": { "shows": "A rate beside its previous value, with the change in percentage points.", "size": "compact", "usedWith": [ "kpi-02", "funnel-01", "chart-panel-01" ], "component": "KPI3", "props": "{ changeType?: \"percent\" | \"points\"; comparison: string; currentLabel?: string; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; goodDirection?: \"up\" | \"down\"; previous?: number; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A rate beside its previous value, with the change in percentage points." }, { "name": "kpi-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/kpi-provenance.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/kpi-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/kpi-04.tsx" } ], "meta": { "shows": "A value with its change and a button beside it that shows the date range, filters and query behind the number.", "size": "compact", "usedWith": [ "kpi-01", "stat-group-02", "chart-panel-01" ], "component": "KPI4", "props": "{ comparison: string; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; previous?: number; provenance: { query: string; description: string; window: null | { from: Date; to: Date }; filters: Record; href: string }; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A value with its change and a button beside it that shows the date range, filters and query behind the number." }, { "name": "kpi-05", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi-01.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/kpi-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/kpi-05.tsx" } ], "meta": { "shows": "A row of headline KPIs, each in a shadcn Card, for the top of a card-style dashboard.", "size": "full", "usedWith": [ "kpi-01", "chart-panel-01", "data-table-06" ], "component": "KPI5", "props": "{ metrics: Omit & { key: string; }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A row of headline KPIs, each in a shadcn Card, for the top of a card-style dashboard." }, { "name": "progress-kpi-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/progress-kpi-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/progress-kpi-01.tsx" } ], "meta": { "shows": "Progress to a monthly target, with the projected total hatched ahead of it and a line where an even pace would be by today.", "size": "compact", "usedWith": [ "goals-01", "forecast-03", "kpi-01" ], "component": "ProgressKPI1", "props": "{ comparison: string; daysElapsed: number; daysInPeriod: number; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; previous?: number; target: number; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Progress to a monthly target, with the projected total hatched ahead of it and a line where an even pace would be by today." }, { "name": "progress-kpi-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/progress-bar.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/progress-kpi-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/progress-kpi-02.tsx" } ], "meta": { "shows": "The share of work done, as one bar split by status with a count for each.", "size": "compact", "usedWith": [ "progress-kpi-03", "pipeline-01", "kanban-01" ], "component": "ProgressKPI2", "props": "{ counts?: { count: number; status: \"done\" | \"in-progress\" | \"todo\" }[]; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The share of work done, as one bar split by status with a count for each." }, { "name": "progress-kpi-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/ring.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/progress-kpi-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/progress-kpi-03.tsx" } ], "meta": { "shows": "A count against a goal as a ring, with how many are left and how many a day that takes.", "size": "compact", "usedWith": [ "progress-kpi-01", "goals-04", "kpi-01" ], "component": "ProgressKPI3", "props": "{ current?: number; daysLeft?: number; goal: number; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A count against a goal as a ring, with how many are left and how many a day that takes." }, { "name": "bar-chart-kpi-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/bar-chart-kpi-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/bar-chart-kpi-01.tsx" } ], "meta": { "shows": "The week's total with a bar for each day and the change on the week before.", "size": "compact", "usedWith": [ "kpi-01", "line-chart-kpi-01", "chart-panel-01" ], "component": "BarChartKPI1", "props": "{ comparison: string; data?: { label: string; value: number }[]; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; height?: number; previous?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The week's total with a bar for each day and the change on the week before." }, { "name": "bar-chart-kpi-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/bar-chart-kpi-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/bar-chart-kpi-02.tsx" } ], "meta": { "shows": "Each day's value with its goal marked on the bar, the share of the goal reached and how many days met it.", "size": "compact", "usedWith": [ "goals-02", "progress-kpi-01", "chart-panel-01" ], "component": "BarChartKPI2", "props": "{ data?: { goal: number; label: string; value: number }[]; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; height?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each day's value with its goal marked on the bar, the share of the goal reached and how many days met it." }, { "name": "line-chart-kpi-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/line-chart-kpi-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/line-chart-kpi-01.tsx" } ], "meta": { "shows": "This week as a filled area over last week as a dashed line, with the days it fell behind.", "size": "compact", "usedWith": [ "bar-chart-kpi-01", "comparison-01", "chart-panel-02" ], "component": "LineChartKPI1", "props": "{ comparison: string; currentLabel?: string; data?: { label: string; previous: number; value: number }[]; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; height?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "This week as a filled area over last week as a dashed line, with the days it fell behind." }, { "name": "area-chart-kpi-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/area-chart-kpi-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/area-chart-kpi-01.tsx" } ], "meta": { "shows": "Gross profit with its margin, and profit inside revenue by day, with the best margin day.", "size": "compact", "usedWith": [ "spend-01", "chart-panel-04", "stat-group-02" ], "component": "AreaChartKPI1", "props": "{ comparison: string; data?: { label: string; profit: number; revenue: number }[]; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; height?: number; previous?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Gross profit with its margin, and profit inside revenue by day, with the best margin day." }, { "name": "area-chart-kpi-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/kpi/area-chart-kpi-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kpi/area-chart-kpi-02.tsx" } ], "meta": { "shows": "A large total with an area chart along the bottom, as a hero number at the top of a dashboard.", "size": "compact", "usedWith": [ "stat-group-02", "kpi-01", "chart-panel-01" ], "component": "AreaChartKPI2", "props": "{ comparison: string; data?: { label: string; value: number }[]; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\"; height?: number; previous?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A large total with an area chart along the bottom, as a hero number at the top of a dashboard." }, { "name": "activity-feed-01", "type": "registry:component", "registryDependencies": [ "button", "card", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/activity-feed/activity-feed-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed/activity-feed-01.tsx" } ], "meta": { "shows": "What people did across a workspace, newest first and grouped by day.", "size": "half", "usedWith": [ "activity-feed-03", "team-01" ], "component": "ActivityFeed1", "props": "{ activities?: { action: string; actor: { avatar?: string; name: string }; at: Date; id: string; target?: string }[]; description?: string; now: Date; onViewAll?: () => void; title: string; timeZone?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "What people did across a workspace, newest first and grouped by day." }, { "name": "activity-feed-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/activity-feed/activity-feed-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed/activity-feed-02.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "activity-feed-01", "comments-01" ], "component": "ActivityFeed2", "props": "{ description: string; events?: { action: string; actor: string; at: Date; change?: { from: string; to: string }; comment?: string; id: string; kind: \"created\" | \"assigned\" | \"changed\" | \"labelled\" | \"commented\" | \"resolved\" }[]; now: Date; recordStatus: { label: string; tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" }; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "activity-feed-03", "type": "registry:component", "registryDependencies": [ "card", "button", "tabs", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/activity-feed/activity-feed-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed/activity-feed-03.tsx" } ], "meta": { "shows": "Notifications in All, Mentions and Unread tabs, with each marked read when opened or all at once.", "size": "half", "usedWith": [ "activity-feed-01", "alerts-01" ], "component": "ActivityFeed3", "props": "{ notifications?: { action: string; actor: { avatar?: string; name: string }; at: Date; id: string; mention?: boolean; preview?: string; read?: boolean; target: string }[]; now: Date; onRead?: (ids: string[]) => void; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Notifications in All, Mentions and Unread tabs, with each marked read when opened or all at once." }, { "name": "activity-feed-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/change-amount.json", "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/activity-feed/activity-feed-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed/activity-feed-04.tsx" } ], "meta": { "shows": "A week of activity as daily bars with the busiest day labelled, by kind, with the most active people.", "size": "half", "usedWith": [ "activity-feed-01", "stat-group-02", "leaderboard-01" ], "component": "ActivityFeed4", "props": "{ contributors?: { count: number; avatar?: string; name: string }[]; counts?: { icon?: ReactNode; label: string; previous: number; value: number }[]; days?: { day: string; previous: number; value: number }[]; range: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A week of activity as daily bars with the busiest day labelled, by kind, with the most active people." }, { "name": "activity-feed-05", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/icon.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/activity-feed/activity-feed-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/activity-feed/activity-feed-05.tsx" } ], "meta": { "shows": "Slack and GitHub activity in one timeline, with quoted messages and actions such as starting a review.", "size": "half", "usedWith": [ "activity-feed-01", "deployments-01" ], "component": "ActivityFeed5", "props": "{ description?: string; events?: { action?: string; author: { avatar?: string; name: string }; at: Date; channel: string; description: string; id: string; message?: { replies?: number; reactions?: number; tags?: string[]; text: string }; platform: \"slack\" | \"github\" }[]; now: Date; onAction?: (event: { action?: string; author: { avatar?: string; name: string }; at: Date; channel: string; description: string; id: string; message?: { replies?: number; reactions?: number; tags?: string[]; text: string }; platform: \"slack\" | \"github\" }) => void; onViewAll?: () => void; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Slack and GitHub activity in one timeline, with quoted messages and actions such as starting a review." }, { "name": "usage-meter-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-01.tsx" } ], "meta": { "shows": "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.", "size": "compact", "usedWith": [ "usage-meter-06", "billing-01", "ai-usage-01" ], "component": "UsageMeter1", "props": "{ limit: number; now: Date; periodEnd: Date; periodStart: Date; timeZone?: string; title: string; unit: string; used?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "usage-meter-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/ring.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-02.tsx" } ], "meta": { "shows": "Storage used as a ring in its status colour, with the space that is free.", "size": "compact", "usedWith": [ "usage-meter-05", "files-01", "usage-meter-06" ], "component": "UsageMeter2", "props": "{ limit: number; title: string; unit: string; used?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Storage used as a ring in its status colour, with the space that is free." }, { "name": "usage-meter-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-03.tsx" } ], "meta": { "shows": "Usage against what the plan includes, with the overage past the limit and what it will cost.", "size": "half", "usedWith": [ "billing-01", "usage-meter-06", "spend-01" ], "component": "UsageMeter3", "props": "{ billedOn: string; description?: string; items?: { included: number; name: string; price: number; per?: number; unit: string; used: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Usage against what the plan includes, with the overage past the limit and what it will cost." }, { "name": "usage-meter-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-04.tsx" } ], "meta": { "shows": "A credit balance with the days left, the date it runs out and recent daily use against the average.", "size": "compact", "usedWith": [ "billing-02", "usage-meter-01", "ai-usage-02" ], "component": "UsageMeter4", "props": "{ balance?: number; dailyUsage?: number[]; now: Date; onTopUp?: () => void; purchased: number; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A credit balance with the days left, the date it runs out and recent daily use against the average." }, { "name": "usage-meter-05", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/progress-bar.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-05.tsx" } ], "meta": { "shows": "Storage split into categories as one segmented bar, with each category's size and share, and the space that is free.", "size": "compact", "usedWith": [ "usage-meter-02", "files-01", "breakdown-01" ], "component": "UsageMeter5", "props": "{ categories?: { label: string; value: number }[]; limit: number; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Storage split into categories as one segmented bar, with each category's size and share, and the space that is free." }, { "name": "usage-meter-06", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-06.tsx" } ], "meta": { "shows": "Every limit on a plan, flagging the ones nearly reached and prompting an upgrade.", "size": "compact", "usedWith": [ "billing-01", "usage-meter-01", "usage-meter-03" ], "component": "UsageMeter6", "props": "{ limits?: { icon: ReactNode; limit: number; name: string; unit?: string; used: number }[]; onUpgrade?: () => void; plan: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Every limit on a plan, flagging the ones nearly reached and prompting an upgrade." }, { "name": "usage-meter-07", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/animated-wave.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-07.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-07.tsx" } ], "meta": { "shows": "What is left as a liquid that drains as usage grows, turning orange and then red.", "size": "compact", "usedWith": [ "usage-meter-02", "billing-01", "usage-meter-06" ], "component": "UsageMeter7", "props": "{ icon: ReactNode; limit: number; onUpgrade?: () => void; title: string; unit: string; used?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "What is left as a liquid that drains as usage grows, turning orange and then red." }, { "name": "usage-meter-08", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/animated-number.json", "https://www.dashboardblocks.com/r/animated-wave.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/usage-meter/usage-meter-08.tsx", "type": "registry:component", "target": "@components/dashboardblocks/usage-meter/usage-meter-08.tsx" } ], "meta": { "shows": "What is left as a round wave that drains as usage grows, with used, free and days until reset below.", "size": "compact", "usedWith": [ "usage-meter-07", "billing-01", "usage-meter-06" ], "component": "UsageMeter8", "props": "{ daysLeft?: number; icon: ReactNode; limit: number; onUpgrade?: () => void; title: string; unit: string; used?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "What is left as a round wave that drains as usage grows, with used, free and days until reset below." }, { "name": "leaderboard-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/leaderboard.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard/leaderboard-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard/leaderboard-01.tsx" } ], "meta": { "shows": "Ranked rows with a background bar sized relative to the leader.", "size": "half", "usedWith": [ "breakdown-01", "geo-02", "chart-panel-02" ], "component": "Leaderboard1", "props": "{ description?: string; labelHeader?: string; onViewAll?: () => void; pages?: { path: string; visitors: number }[]; title: string; valueHeader?: string; viewAllLabel?: null | string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Ranked rows with a background bar sized relative to the leader." }, { "name": "leaderboard-02", "type": "registry:component", "registryDependencies": [ "card", "avatar", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/leaderboard.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard/leaderboard-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard/leaderboard-02.tsx" } ], "meta": { "shows": "People ranked by revenue with a bar to their quota and the change since the last period.", "size": "half", "usedWith": [ "team-01", "leaderboard-04", "chart-panel-01" ], "component": "Leaderboard2", "props": "{ currency?: string; description?: string; reps?: { avatar: string; deals: number; id: number; name: string; quota: number; revenue: number; trend: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "People ranked by revenue with a bar to their quota and the change since the last period." }, { "name": "leaderboard-03", "type": "registry:component", "registryDependencies": [ "card", "avatar", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/leaderboard.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard/leaderboard-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard/leaderboard-03.tsx" } ], "meta": { "shows": "The top three on a podium sized by their totals, with the rest of the field listed below.", "size": "half", "usedWith": [ "leaderboard-02", "team-02", "chart-panel-01" ], "component": "Leaderboard3", "props": "{ contributors?: { avatar: string; id: number; name: string; value: number }[]; description?: string; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The top three on a podium sized by their totals, with the rest of the field listed below." }, { "name": "leaderboard-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/leaderboard.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard/leaderboard-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard/leaderboard-04.tsx" } ], "meta": { "shows": "Products ranked by revenue with how far each moved in the ranking since the last period.", "size": "half", "usedWith": [ "leaderboard-01", "breakdown-01", "chart-panel-01" ], "component": "Leaderboard4", "props": "{ currency?: string; description?: string; period?: string; products?: { category: string; change: number | \"new\"; id: number; name: string; revenue: number; unitsSold: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Products ranked by revenue with how far each moved in the ranking since the last period." }, { "name": "leaderboard-05", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/country-flag.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/leaderboard.json" ], "files": [ { "path": "registry/components/dashboardblocks/leaderboard/leaderboard-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/leaderboard/leaderboard-05.tsx" } ], "meta": { "shows": "A ranked list that can be reversed and expanded to show every entry.", "size": "half", "usedWith": [ "leaderboard-01", "data-table-01", "breakdown-01" ], "component": "Leaderboard5", "props": "{ countries?: { code: string; name: string; visitors: number }[]; description?: string; initialCount?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A ranked list that can be reversed and expanded to show every entry." }, { "name": "chart-panel-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-01.tsx" } ], "meta": { "shows": "This period's area against the previous period's dashed line, with the change written as a sentence.", "size": "full", "usedWith": [ "stat-group-02", "breakdown-01", "data-table-02" ], "component": "ChartPanel1", "props": "{ comparison?: string; currentLabel?: string; data?: { current: number; label: string; previous: number }[]; description: string; formatter?: (value: number) => string; previousLabel?: string; showPrevious?: boolean; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "This period's area against the previous period's dashed line, with the change written as a sentence." }, { "name": "chart-panel-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "meta": { "shows": "Tabs for related metrics, each showing its total and change, over a chart of the chosen one with its average.", "size": "full", "usedWith": [ "realtime-01", "leaderboard-01", "geo-02" ], "component": "ChartPanel2", "props": "{ comparison?: string; data?: Record & { label: string; }[]; description: string; metrics?: { changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-02.tsx" } ], "description": "Tabs for related metrics, each showing its total and change, over a chart of the chosen one with its average." }, { "name": "chart-panel-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-03.tsx" } ], "meta": { "shows": "Monthly totals as stacked bars split by category, with the average and the latest total labelled.", "size": "full", "usedWith": [ "breakdown-02", "data-table-02", "stat-group-01" ], "component": "ChartPanel3", "props": "{ data?: Record & { label: string; }[]; description: string; series: { color: string; key: string; label: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Monthly totals as stacked bars split by category, with the average and the latest total labelled." }, { "name": "chart-panel-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-04.tsx" } ], "meta": { "shows": "A single series of bars with the latest period highlighted and labelled, against a goal line.", "size": "full", "usedWith": [ "stat-group-02", "funnel-03", "activity-feed-01" ], "component": "ChartPanel4", "props": "{ data?: { label: string; value: number }[]; description: string; formatter?: (value: number) => string; goal?: { label: string; value: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A single series of bars with the latest period highlighted and labelled, against a goal line." }, { "name": "chart-panel-05", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/ring.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-05.tsx" } ], "meta": { "shows": "A donut splitting a total into parts, with each value and share listed beside it.", "size": "half", "usedWith": [ "breakdown-01", "leaderboard-01" ], "component": "ChartPanel5", "props": "{ description: string; formatter?: (value: number) => string; segments?: { color: string; label: string; value: number }[]; title: string; totalLabel?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A donut splitting a total into parts, with each value and share listed beside it." }, { "name": "chart-panel-06", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/chart-panel/chart-panel-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/chart-panel/chart-panel-06.tsx" } ], "meta": { "shows": "Several ordered lines, such as percentiles, in one hue from light to full strength, labelled at their ends, against an SLO line.", "size": "full", "usedWith": [ "alerts-01", "status-02", "deployments-01" ], "component": "ChartPanel6", "props": "{ comparison?: string; data?: Record & { label: string; }[]; description: string; formatter?: (value: number) => string; headline: string; labelHeading?: string; limit?: { label: string; value: number }; percentiles: { key: string; label: string }[]; previous?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Several ordered lines, such as percentiles, in one hue from light to full strength, labelled at their ends, against an SLO line." }, { "name": "breakdown-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/breakdown/breakdown-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/breakdown/breakdown-01.tsx" } ], "meta": { "shows": "A single 100% bar splitting a total into categories, with each value and share listed below.", "size": "half", "usedWith": [ "chart-panel-01", "stat-group-02" ], "component": "Breakdown1", "props": "{ description: string; formatter?: (value: number) => string; segments?: { color: string; label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A single 100% bar splitting a total into categories, with each value and share listed below." }, { "name": "breakdown-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/breakdown/breakdown-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/breakdown/breakdown-02.tsx" } ], "meta": { "shows": "One bar per group showing its mix of categories, sorted by a chosen category's share, which is labelled on every row.", "size": "half", "usedWith": [ "chart-panel-03", "data-table-02" ], "component": "Breakdown2", "props": "{ categories: { color: string; key: string; label: string }[]; description: string; groups?: { label: string; values: Record }[]; groupsLabel?: string; highlight: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "One bar per group showing its mix of categories, sorted by a chosen category's share, which is labelled on every row." }, { "name": "breakdown-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/breakdown/breakdown-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/breakdown/breakdown-03.tsx" } ], "meta": { "shows": "A 10 by 10 grid of squares where each square is 1% of the total, coloured by category.", "size": "half", "usedWith": [ "breakdown-01", "chart-panel-05" ], "component": "Breakdown3", "props": "{ description: string; segments?: { color: string; label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A 10 by 10 grid of squares where each square is 1% of the total, coloured by category." }, { "name": "breakdown-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/change-amount.json", "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json" ], "files": [ { "path": "registry/components/dashboardblocks/breakdown/breakdown-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/breakdown/breakdown-04.tsx" } ], "meta": { "shows": "How each category's share of a total moved between two periods, as a dot for each period joined by a line.", "size": "half", "usedWith": [ "chart-panel-03", "data-table-03" ], "component": "Breakdown4", "props": "{ currentLabel: string; description: string; items?: { current: number; label: string; previous: number }[]; previousLabel: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "How each category's share of a total moved between two periods, as a dot for each period joined by a line." }, { "name": "funnel-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/funnel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/funnel/funnel-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/funnel/funnel-01.tsx" } ], "meta": { "shows": "Each stage as a bar sized against the first, with the conversion at each step and overall.", "size": "half", "usedWith": [ "stat-group-02", "data-table-02", "chart-panel-01" ], "component": "Funnel1", "props": "{ description: string; link?: { href: string; label: string }; stages?: { label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each stage as a bar sized against the first, with the conversion at each step and overall." }, { "name": "funnel-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/funnel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/funnel/funnel-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/funnel/funnel-02.tsx" } ], "meta": { "shows": "Stages as columns against a 0 to 100% axis, each topped by the share that left at that step, with the biggest drop named.", "size": "full", "usedWith": [ "funnel-04", "data-table-03" ], "component": "Funnel2", "props": "{ description: string; stages?: { label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Stages as columns against a 0 to 100% axis, each topped by the share that left at that step, with the biggest drop named." }, { "name": "funnel-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/funnel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/funnel/funnel-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/funnel/funnel-03.tsx" } ], "meta": { "shows": "A vertical stepper through the stages that calls out the step with the biggest drop-off.", "size": "half", "usedWith": [ "chart-panel-04", "data-table-03" ], "component": "Funnel3", "props": "{ description: string; stages?: { label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A vertical stepper through the stages that calls out the step with the biggest drop-off." }, { "name": "funnel-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/funnel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/funnel/funnel-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/funnel/funnel-04.tsx" } ], "meta": { "shows": "Two segments as lines through every stage, each as a share of its first step, with the gap between them shaded.", "size": "full", "usedWith": [ "funnel-01", "data-table-03" ], "component": "Funnel4", "props": "{ description: string; segments: { color: string; key: string; label: string }[]; stages?: { label: string; values: Record }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Two segments as lines through every stage, each as a share of its first step, with the gap between them shaded." }, { "name": "status-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/status.json" ], "files": [ { "path": "registry/components/dashboardblocks/status/status-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status/status-01.tsx" } ], "meta": { "shows": "Each service with its current status, the worst one above the title, and a sentence naming the services that are not operational.", "size": "half", "usedWith": [ "status-03", "alerts-01", "data-table-04" ], "component": "Status1", "props": "{ description?: string; services?: { description?: string; name: string; status: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\" }[]; title: string; updated?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each service with its current status, the worst one above the title, and a sentence naming the services that are not operational." }, { "name": "status-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/brand-logos.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/status/status-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status/status-02.tsx" } ], "meta": { "shows": "Ninety days of daily status for each service as a row of bars, with its icon, its status now and a tooltip for any day.", "size": "full", "usedWith": [ "status-01", "status-03", "alerts-01" ], "component": "Status2", "props": "{ action?: ReactNode; description?: ReactNode; services?: { days: { label: string; note?: string; status: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\"; uptime?: number }[]; detail?: string; icon?: ReactNode; name: string; status?: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Ninety days of daily status for each service as a row of bars, with its icon, its status now and a tooltip for any day." }, { "name": "status-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/status.json" ], "files": [ { "path": "registry/components/dashboardblocks/status/status-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status/status-03.tsx" } ], "meta": { "shows": "An active incident with its severity, affected components and a timeline of updates.", "size": "half", "usedWith": [ "status-01", "status-02", "alerts-01" ], "component": "Status3", "props": "{ affected: string[]; onSubscribe?: () => void; severity: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\"; started: string; title: string; updates?: { message: string; stage: \"Investigating\" | \"Identified\" | \"Monitoring\" | \"Resolved\"; time: string }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "An active incident with its severity, affected components and a timeline of updates." }, { "name": "status-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/status/status-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status/status-04.tsx" } ], "meta": { "shows": "Regions, each with its status, p95 latency bar and error rate.", "size": "half", "usedWith": [ "status-01", "status-02", "alerts-01" ], "component": "Status4", "props": "{ description?: string; regions?: { code: string; errorRate: number; latency: number; name: string; status: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Regions, each with its status, p95 latency bar and error rate." }, { "name": "status-05", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status.json" ], "files": [ { "path": "registry/components/dashboardblocks/status/status-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/status/status-05.tsx" } ], "meta": { "shows": "One service's uptime, incident count and downtime, with its daily history and recent incidents.", "size": "full", "usedWith": [ "status-02", "status-03", "alerts-01" ], "component": "Status5", "props": "{ days?: { label: string; note?: string; status: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\"; uptime?: number }[]; description: string; downtime?: string; incidents?: { date: string; duration: string; severity: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\"; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "One service's uptime, incident count and downtime, with its daily history and recent incidents." }, { "name": "stat-group-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/stat-group.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group/stat-group-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group/stat-group-01.tsx" } ], "meta": { "shows": "Metrics side by side, each with its change written as a sentence.", "size": "full", "usedWith": [ "chart-panel-01", "kpi-01", "comparison-01" ], "component": "StatGroup1", "props": "{ comparison: string; metrics?: { changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Metrics side by side, each with its change written as a sentence." }, { "name": "stat-group-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group/stat-group-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group/stat-group-02.tsx" } ], "meta": { "shows": "A row of metrics, each with its change and a 14-day sparkline, under a sentence saying how many improved.", "size": "full", "usedWith": [ "chart-panel-01", "breakdown-01", "data-table-02" ], "component": "StatGroup2", "props": "{ comparison?: string; description?: string; metrics?: { history: number[]; changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A row of metrics, each with its change and a 14-day sparkline, under a sentence saying how many improved." }, { "name": "stat-group-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "tabs", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group/stat-group-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group/stat-group-03.tsx" } ], "meta": { "shows": "A row of metrics where picking one charts it by day against the previous period.", "size": "full", "usedWith": [ "heatmap-01", "geo-04", "billing-01" ], "component": "StatGroup3", "props": "{ currentLabel?: string; metrics?: { daily: { current: number; label: string; previous: number }[]; changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; previousLabel?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A row of metrics where picking one charts it by day against the previous period." }, { "name": "stat-group-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group/stat-group-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group/stat-group-04.tsx" } ], "meta": { "shows": "Five metrics in a slim row with their changes, wrapping to two columns when narrow.", "size": "full", "usedWith": [ "chart-panel-02", "kpi-02", "data-table-01" ], "component": "StatGroup4", "props": "{ metrics?: { changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Five metrics in a slim row with their changes, wrapping to two columns when narrow." }, { "name": "stat-group-05", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/stat-group/stat-group-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/stat-group/stat-group-05.tsx" } ], "meta": { "shows": "Four metrics, each with a bar for this period over a bar for the one before.", "size": "full", "usedWith": [ "chart-panel-03", "kpi-01", "breakdown-01" ], "component": "StatGroup5", "props": "{ comparison: string; currentLabel?: string; description: string; metrics?: { changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; placeholders?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Four metrics, each with a bar for this period over a bar for the one before." }, { "name": "dashboard-header-01", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboard-header/dashboard-header-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboard-header/dashboard-header-01.tsx" } ], "meta": { "shows": "A dashboard header with a title, date range presets, a compare switch, removable filter chips, an add filter menu and export.", "size": "full", "usedWith": [ "stat-group-02", "chart-panel-01" ], "component": "DashboardHeader1", "props": "{ defaultFilters?: { field: string; value: string }[]; defaultPreset?: \"today\" | \"7d\" | \"30d\" | \"90d\"; filterFields: { field: string; values: string[] }[]; onExport?: (format: string) => void; title: string; today: Date }" }, "description": "A dashboard header with a title, date range presets, a compare switch, removable filter chips, an add filter menu and export." }, { "name": "dashboard-header-02", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboard-header/dashboard-header-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboard-header/dashboard-header-02.tsx" } ], "meta": { "shows": "A short dashboard header with a title, a date range menu and an export button.", "size": "full", "usedWith": [ "stat-group-01", "chart-panel-01" ], "component": "DashboardHeader2", "props": "{ defaultPreset?: \"today\" | \"7d\" | \"30d\" | \"90d\"; onExport?: (format: string) => void; title: string; today: Date }" }, "description": "A short dashboard header with a title, a date range menu and an export button." }, { "name": "dashboard-header-03", "type": "registry:component", "registryDependencies": [ "button", "button-group", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboard-header/dashboard-header-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboard-header/dashboard-header-03.tsx" } ], "meta": { "shows": "A dashboard header with date range presets as a segmented control, a compare switch and a filter chip.", "size": "full", "usedWith": [ "stat-group-02", "chart-panel-02" ], "component": "DashboardHeader3", "props": "{ defaultFilters?: { field: string; value: string }[]; defaultPreset?: \"today\" | \"7d\" | \"30d\" | \"90d\"; onExport?: (format: string) => void; title: string; today: Date }" }, "description": "A dashboard header with date range presets as a segmented control, a compare switch and a filter chip." }, { "name": "dashboard-header-04", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/dashboard-header.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboard-header/dashboard-header-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboard-header/dashboard-header-04.tsx" } ], "meta": { "shows": "A dashboard header with a description, the time of the last update and a refresh button beside the date range and export.", "size": "full", "usedWith": [ "realtime-01", "stat-group-02" ], "component": "DashboardHeader4", "props": "{ defaultPreset?: \"today\" | \"7d\" | \"30d\" | \"90d\"; description?: string; lastUpdated: string; onExport?: (format: string) => void; onRefresh?: () => Promise; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A dashboard header with a description, the time of the last update and a refresh button beside the date range and export." }, { "name": "data-table-01", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/data-table.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-01.tsx" } ], "meta": { "shows": "A table of rows with sortable column headers.", "size": "full", "usedWith": [ "data-table-06", "stat-group-02" ], "component": "DataTable1", "props": "{ description?: string; period?: string; rows?: { bounceRate: number; duration: number; path: string; views: number; visitors: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A table of rows with sortable column headers." }, { "name": "data-table-02", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-02.tsx" } ], "meta": { "shows": "Revenue by product, each with a bar scaled to the top product and its share of the total.", "size": "full", "usedWith": [ "chart-panel-01", "breakdown-01", "leaderboard-01" ], "component": "DataTable2", "props": "{ description?: string; period?: string; rows?: { category: string; name: string; revenue: number; units: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Revenue by product, each with a bar scaled to the top product and its share of the total." }, { "name": "data-table-03", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/stat-group.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-03.tsx" } ], "meta": { "shows": "Campaign conversions and cost per conversion, each with its change and a 14-day sparkline.", "size": "full", "usedWith": [ "stat-group-02", "chart-panel-01", "comparison-01" ], "component": "DataTable3", "props": "{ comparison: string; description?: string; period?: string; rows?: { channel: string; conversions: number[]; name: string; previousConversions: number; previousCost: number; spend: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Campaign conversions and cost per conversion, each with its change and a 14-day sparkline." }, { "name": "data-table-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/data-table.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-04.tsx" } ], "meta": { "shows": "Services in a table with their status, latency and error rate, worst status first.", "size": "full", "usedWith": [ "status-01", "alerts-01", "deployments-01" ], "component": "DataTable4", "props": "{ description?: string; errorRateLimit?: number; latencyLimit?: number; rows?: { errorRate: number; latency: number; name: string; region: string; status: \"operational\" | \"degraded\" | \"partial\" | \"major\" | \"maintenance\" | \"unknown\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Services in a table with their status, latency and error rate, worst status first." }, { "name": "data-table-05", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/data-table.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-05.tsx" } ], "meta": { "shows": "A table of recent orders split into pages of five, with controls to move between them.", "size": "full", "usedWith": [ "data-table-06", "billing-03" ], "component": "DataTable5", "props": "{ description?: string; pageSize?: number; period?: string; rows?: { amount: number; customer: string; date: string; email: string; id: string; state: \"failed\" | \"paid\" | \"pending\" | \"refunded\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A table of recent orders split into pages of five, with controls to move between them." }, { "name": "data-table-06", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/data-table.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/data-table/data-table-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/data-table/data-table-06.tsx" } ], "meta": { "shows": "A searchable table with status and plan filters, a column menu, page sizes and row selection to export or email.", "size": "full", "usedWith": [ "data-table-05", "stat-group-02" ], "component": "DataTable6", "props": "{ description?: string; onEmail?: (rows: { company: string; email: string; id: string; mrr: number; plan: \"Enterprise\" | \"Free\" | \"Pro\" | \"Team\"; seats: number; signedUp: string; status: \"active\" | \"churned\" | \"past-due\" | \"trial\" }[]) => void; onExport?: (rows: { company: string; email: string; id: string; mrr: number; plan: \"Enterprise\" | \"Free\" | \"Pro\" | \"Team\"; seats: number; signedUp: string; status: \"active\" | \"churned\" | \"past-due\" | \"trial\" }[]) => void; pageSize?: number; rows?: { company: string; email: string; id: string; mrr: number; plan: \"Enterprise\" | \"Free\" | \"Pro\" | \"Team\"; seats: number; signedUp: string; status: \"active\" | \"churned\" | \"past-due\" | \"trial\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A searchable table with status and plan filters, a column menu, page sizes and row selection to export or email." }, { "name": "heatmap-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/heatmap/heatmap-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/heatmap/heatmap-01.tsx" } ], "meta": { "shows": "When visitors arrive, as a grid of weekday by hour, darker where there are more.", "size": "full", "usedWith": [ "stat-group-03", "geo-04", "retention-03" ], "component": "Heatmap1", "props": "{ description?: string; title: string; unit: string; values?: number[][]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "When visitors arrive, as a grid of weekday by hour, darker where there are more." }, { "name": "heatmap-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/retention.json" ], "files": [ { "path": "registry/components/dashboardblocks/heatmap/heatmap-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/heatmap/heatmap-02.tsx" } ], "meta": { "shows": "The share of each weekly signup cohort still active in each week after signup, as a shaded grid.", "size": "full", "usedWith": [ "retention-02", "retention-04" ], "component": "Heatmap2", "props": "{ cohorts?: { label: string; size: number; retained: number[]; color?: string; icon?: ReactNode; eligible?: number[]; filling?: boolean }[]; description?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The share of each weekly signup cohort still active in each week after signup, as a shaded grid." }, { "name": "heatmap-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/heatmap/heatmap-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/heatmap/heatmap-03.tsx" } ], "meta": { "shows": "A year of daily values as a calendar grid, darker on busier days.", "size": "full", "usedWith": [ "chart-panel-01", "stat-group-01" ], "component": "Heatmap3", "props": "{ daily?: number[]; description?: string; endDate: Date; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A year of daily values as a calendar grid, darker on busier days." }, { "name": "heatmap-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/heatmap/heatmap-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/heatmap/heatmap-04.tsx" } ], "meta": { "shows": "The p95 latency of each endpoint by hour over the last day, darker where it is slower.", "size": "full", "usedWith": [ "alerts-02", "status-04" ], "component": "Heatmap4", "props": "{ description?: string; endpoints?: string[]; target?: number; title: string; values?: number[][]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The p95 latency of each endpoint by hour over the last day, darker where it is slower." }, { "name": "states-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/states/states-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/states/states-01.tsx" } ], "meta": { "shows": "Grey placeholders shaped like a row of stats, shown while data loads so nothing shifts when it arrives.", "size": "full", "usedWith": [ "stat-group-02", "states-04" ], "component": "States1", "props": "{ comparison: string; description: string; load: () => Promise<{ changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]>; placeholders?: number; title: string }" }, "description": "Grey placeholders shaped like a row of stats, shown while data loads so nothing shifts when it arrives." }, { "name": "states-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/states/states-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/states/states-02.tsx" } ], "meta": { "shows": "A chart that stays in place at reduced opacity while it refreshes, with an updating indicator in the header.", "size": "half", "usedWith": [ "chart-panel-01", "states-01" ], "component": "States2", "props": "{ description: string; load: () => Promise<{ label: string; value: number }[]>; title: string }" }, "description": "A chart that stays in place at reduced opacity while it refreshes, with an updating indicator in the header." }, { "name": "states-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/states/states-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/states/states-03.tsx" } ], "meta": { "shows": "A filtered table with no matching rows, explaining why it is empty and offering a way out.", "size": "full", "usedWith": [ "data-table-02", "dashboard-header-01" ], "component": "States3", "props": "{ defaultFilters: { field: \"status\" | \"region\"; label: string; value: string }[]; orders?: { amount: number; customer: string; id: string; region: string; status: \"Paid\" | \"Pending\" | \"Refunded\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A filtered table with no matching rows, explaining why it is empty and offering a way out." }, { "name": "states-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/states/states-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/states/states-04.tsx" } ], "meta": { "shows": "A chart that loads its own data and, when the request fails, says so where the number and the chart go.", "size": "half", "usedWith": [ "states-01", "alerts-01" ], "component": "States4", "props": "{ description: string; load: () => Promise<{ label: string; value: number }[]>; title: string }" }, "description": "A chart that loads its own data and, when the request fails, says so where the number and the chart go." }, { "name": "dashboard-01", "type": "registry:block", "title": "Store dashboard", "description": "A store dashboard: header filters scope stats, revenue, channels, products, a checkout funnel and month-to-date revenue, with low stock alongside.", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown-01.json", "https://www.dashboardblocks.com/r/chart-panel-01.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/data-table-02.json", "https://www.dashboardblocks.com/r/forecast-03.json", "https://www.dashboardblocks.com/r/funnel-01.json", "https://www.dashboardblocks.com/r/inventory-01.json", "https://www.dashboardblocks.com/r/stat-group-02.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboards/dashboard-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboards/dashboard-01.tsx" } ], "meta": { "shows": "A full store dashboard with revenue, sales channels, top products, a checkout funnel and low stock, scoped by header filters.", "size": "page", "usedWith": [], "component": "Dashboard1", "props": "{ empty?: boolean; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" } }, { "name": "dashboard-02", "type": "registry:block", "title": "SaaS dashboard", "description": "A SaaS dashboard: metric tabs, an activity heatmap, MRR by region, MRR movement, retention milestones and service status, filtered by plan.", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/billing-01.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/data-table-04.json", "https://www.dashboardblocks.com/r/geo-04.json", "https://www.dashboardblocks.com/r/heatmap-01.json", "https://www.dashboardblocks.com/r/retention-03.json", "https://www.dashboardblocks.com/r/stat-group-03.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboards/dashboard-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboards/dashboard-02.tsx" } ], "meta": { "shows": "A full SaaS dashboard with metric tabs, an activity heatmap, revenue by region, billing movement, retention and service status.", "size": "page", "usedWith": [], "component": "Dashboard2", "props": "{ empty?: boolean; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" } }, { "name": "dashboard-03", "type": "registry:block", "title": "Web analytics dashboard", "description": "A web analytics dashboard: traffic tabs, visitors right now, a traffic flow, top pages, top countries and browsers, filtered by device.", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown-01.json", "https://www.dashboardblocks.com/r/chart-panel-02.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/flow-01.json", "https://www.dashboardblocks.com/r/geo-02.json", "https://www.dashboardblocks.com/r/leaderboard-01.json", "https://www.dashboardblocks.com/r/realtime-01.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboards/dashboard-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboards/dashboard-03.tsx" } ], "meta": { "shows": "A full web analytics dashboard with traffic over time, visitors right now, a traffic flow, top pages, countries and browsers.", "size": "page", "usedWith": [], "component": "Dashboard3", "props": "{ empty?: boolean; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" } }, { "name": "dashboard-04", "type": "registry:block", "title": "CRM dashboard", "description": "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 segment.", "registryDependencies": [ "https://www.dashboardblocks.com/r/activity-feed-01.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel-04.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/funnel-03.json", "https://www.dashboardblocks.com/r/pipeline.json", "https://www.dashboardblocks.com/r/pipeline-02.json", "https://www.dashboardblocks.com/r/pipeline-03.json", "https://www.dashboardblocks.com/r/pipeline-04.json", "https://www.dashboardblocks.com/r/stat-group-02.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboards/dashboard-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboards/dashboard-04.tsx" } ], "meta": { "shows": "A full sales dashboard in shadcn Cards, with stats, open pipeline by stage, bookings, lead conversion, a quarter forecast and stuck deals.", "size": "page", "usedWith": [], "component": "Dashboard4", "props": "{ empty?: boolean; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" } }, { "name": "dashboard-05", "type": "registry:block", "title": "DevOps dashboard", "description": "A DevOps dashboard: live throughput, delivery performance, response time percentiles, open alerts, uptime, build health and recent deployments, filtered by service.", "registryDependencies": [ "https://www.dashboardblocks.com/r/alerts-01.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel-06.json", "https://www.dashboardblocks.com/r/dashboard-header.json", "https://www.dashboardblocks.com/r/deployments.json", "https://www.dashboardblocks.com/r/deployments-01.json", "https://www.dashboardblocks.com/r/deployments-03.json", "https://www.dashboardblocks.com/r/deployments-04.json", "https://www.dashboardblocks.com/r/realtime-02.json", "https://www.dashboardblocks.com/r/status.json", "https://www.dashboardblocks.com/r/status-02.json" ], "files": [ { "path": "registry/components/dashboardblocks/dashboards/dashboard-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/dashboards/dashboard-05.tsx" } ], "meta": { "shows": "A full DevOps dashboard with live throughput, delivery performance, response times, open alerts, uptime and recent deployments.", "size": "page", "usedWith": [], "component": "Dashboard5", "props": "{ empty?: boolean; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" } }, { "name": "goals-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/goals.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/goals/goals-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/goals/goals-01.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "forecast-03", "progress-kpi-01", "goals-03" ], "component": "Goals1", "props": "{ current?: number; end: Date; formatter?: (value: number) => string; start: Date; target: number; title: string; today: Date; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "goals-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/goals.json" ], "files": [ { "path": "registry/components/dashboardblocks/goals/goals-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/goals/goals-02.tsx" } ], "meta": { "shows": "Several goals for the same period, each with its own pace.", "size": "half", "usedWith": [ "goals-01", "metric-list-03", "forecast-02" ], "component": "Goals2", "props": "{ description: string; elapsed: number; goals?: { current: number; formatter?: (value: number) => string; label: string; owner: string; target: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Several goals for the same period, each with its own pace." }, { "name": "goals-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/goals.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/goals/goals-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/goals/goals-03.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "goals-01", "forecast-03", "stat-group-01" ], "component": "Goals3", "props": "{ daily?: number[]; description: string; days: string[]; formatter?: (value: number) => string; target: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "goals-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/ring.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/goals/goals-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/goals/goals-04.tsx" } ], "meta": { "shows": "Small daily goals as rings, with what is left to do or how far past the goal each one is.", "size": "half", "usedWith": [ "progress-kpi-03", "goals-02", "checklist-01" ], "component": "Goals4", "props": "{ description: string; goals?: { current: number; label: string; target: number; unit: string }[]; placeholders?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Small daily goals as rings, with what is left to do or how far past the goal each one is." }, { "name": "comparison-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/comparison/comparison-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comparison/comparison-01.tsx" } ], "meta": { "shows": "Each metric this period and last, with the difference and the change, under a sentence saying how many improved.", "size": "full", "usedWith": [ "stat-group-01", "line-chart-kpi-01", "comparison-03" ], "component": "Comparison1", "props": "{ currentLabel: string; description?: string; metrics?: { current: number; differenceFormatter?: (value: number) => string; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; label: string; previous: number }[]; previousLabel: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each metric this period and last, with the difference and the change, under a sentence saying how many improved." }, { "name": "comparison-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/comparison.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/comparison/comparison-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comparison/comparison-02.tsx" } ], "meta": { "shows": "The lift of a variant over the control, with a 95% confidence interval drawn against zero and what it means.", "size": "half", "usedWith": [ "comparison-01", "funnel-01", "kpi-03" ], "component": "Comparison2", "props": "{ control?: { conversions: number; label: string; name: string; visitors: number }; description: string; metric: string; title: string; variant?: { conversions: number; label: string; name: string; visitors: number }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The lift of a variant over the control, with a 95% confidence interval drawn against zero and what it means." }, { "name": "comparison-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/comparison.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/comparison/comparison-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comparison/comparison-03.tsx" } ], "meta": { "shows": "The net change, then the change in each segment as bars either side of zero, from the biggest gain to the biggest drop.", "size": "half", "usedWith": [ "comparison-01", "breakdown-01", "data-table-01" ], "component": "Comparison3", "props": "{ description?: string; formatter?: (value: number) => string; segments?: { current: number; label: string; previous: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The net change, then the change in each segment as bars either side of zero, from the biggest gain to the biggest drop." }, { "name": "comparison-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/comparison.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/comparison/comparison-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comparison/comparison-04.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "comparison-01", "comparison-03", "metric-list-03" ], "component": "Comparison4", "props": "{ afterLabel: string; beforeLabel: string; description?: string; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; rows?: { after: number; before: number; label: string }[]; title: string; unitLabel?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "alerts-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/alerts.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/alerts/alerts-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/alerts/alerts-01.tsx" } ], "meta": { "shows": "Open alerts, most recent first, each with a button to acknowledge it.", "size": "half", "usedWith": [ "alerts-04", "status-01", "activity-feed-01" ], "component": "Alerts1", "props": "{ alerts?: { acknowledged?: boolean; firedAt: Date; id: string; region?: string; service: string; severity: \"resolved\" | \"warning\" | \"info\" | \"critical\"; title: string }[]; description?: string; now: Date; onAcknowledge?: (id: string) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Open alerts, most recent first, each with a button to acknowledge it." }, { "name": "alerts-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/alerts.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/alerts/alerts-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/alerts/alerts-02.tsx" } ], "meta": { "shows": "A metric over the last hour against its threshold line, with the current value, the peak and actions to take.", "size": "half", "usedWith": [ "alerts-01", "chart-panel-01", "status-02" ], "component": "Alerts2", "props": "{ description: string; formatter?: (value: number) => string; metric: string; readings?: { label: string; value: number }[]; runbookHref?: string; severity: \"resolved\" | \"warning\" | \"info\" | \"critical\"; threshold: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A metric over the last hour against its threshold line, with the current value, the peak and actions to take." }, { "name": "alerts-03", "type": "registry:component", "registryDependencies": [ "switch", "https://www.dashboardblocks.com/r/alerts.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/alerts/alerts-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/alerts/alerts-03.tsx" } ], "meta": { "shows": "A table of alert rules with their conditions, severities and channels, and a switch to pause or resume each one.", "size": "full", "usedWith": [ "alerts-01", "alerts-04" ], "component": "Alerts3", "props": "{ description?: string; now: Date; onEnabledChange?: (id: string, enabled: boolean) => void; rules?: { channels: string[]; condition: string; enabled: boolean; id: string; lastTriggered?: Date; name: string; severity: \"resolved\" | \"warning\" | \"info\" | \"critical\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A table of alert rules with their conditions, severities and channels, and a switch to pause or resume each one." }, { "name": "alerts-04", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/alerts.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/alerts/alerts-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/alerts/alerts-04.tsx" } ], "meta": { "shows": "A slim strip with open alerts by severity and the latest one, for the top of a dashboard.", "size": "full", "usedWith": [ "alerts-01", "stat-group-02", "status-01" ], "component": "Alerts4", "props": "{ counts?: { warning?: number; info?: number; critical?: number }; latest?: { firedAt: Date; severity: \"resolved\" | \"warning\" | \"info\" | \"critical\"; source: string; title: string }; now: Date; onViewAll?: () => void; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A slim strip with open alerts by severity and the latest one, for the top of a dashboard." }, { "name": "geo-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/geo.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/leaderboard.json" ], "files": [ { "path": "registry/components/dashboardblocks/geo/geo-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/geo/geo-01.tsx" } ], "meta": { "shows": "Revenue by US state as a tile map on a single-hue scale, with the total and the top five states.", "size": "full", "usedWith": [ "geo-02", "chart-panel-01" ], "component": "Geo1", "props": "{ description?: string; formatter?: (value: number) => string; title: string; valueLabel: string; values?: Record; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Revenue by US state as a tile map on a single-hue scale, with the total and the top five states." }, { "name": "geo-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/country-flag.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/leaderboard.json" ], "files": [ { "path": "registry/components/dashboardblocks/geo/geo-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/geo/geo-02.tsx" } ], "meta": { "shows": "The leading countries with flags, values and shares, and the rest summed into one row.", "size": "half", "usedWith": [ "geo-03", "chart-panel-02", "breakdown-01" ], "component": "Geo2", "props": "{ countries?: { code: string; name: string; value: number }[]; description?: string; formatter?: (value: number) => string; limit?: number; otherLabel?: null | string; title: string; total?: number; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The leading countries with flags, values and shares, and the rest summed into one row." }, { "name": "geo-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/geo.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/geo/geo-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/geo/geo-03.tsx" } ], "meta": { "shows": "Active users by city right now as markers sized by value on a dotted world map, with the busiest city named.", "size": "full", "usedWith": [ "realtime-01", "geo-02" ], "component": "Geo3", "props": "{ description?: string; locations?: { country?: string; id: string; lat: number; lon: number; name: string; value: number }[]; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Active users by city right now as markers sized by value on a dotted world map, with the busiest city named." }, { "name": "geo-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/table.json" ], "meta": { "shows": "Revenue split across regions, each with its share and its change on the previous quarter.", "size": "half", "usedWith": [ "heatmap-01", "billing-01" ], "component": "Geo4", "props": "{ comparison: string; description?: string; formatter?: (value: number) => string; regions?: { color: string; current: number; label: string; previous: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/geo/geo-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/geo/geo-04.tsx" } ], "description": "Revenue split across regions, each with its share and its change on the previous quarter." }, { "name": "billing-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing/billing-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing/billing-01.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "billing-04", "chart-panel-01", "retention-03" ], "component": "Billing1", "props": "{ currency?: string; description: string; movement?: { contraction: number; churn: number; expansion: number; newBusiness: number; starting: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "billing-02", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing/billing-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing/billing-02.tsx" } ], "meta": { "shows": "The current plan and its price, when it renews, the next invoice and the payment method on file, with actions to manage them.", "size": "half", "usedWith": [ "billing-03", "billing-05", "usage-meter-01" ], "component": "Billing2", "props": "{ cancelsAtPeriodEnd?: boolean; currency?: string; interval: \"month\" | \"year\"; nextInvoiceAmount?: number; now: Date; onManage?: () => void | Promise; onUpdatePaymentMethod?: () => void | Promise; pastDue?: { amount: number; failedOn: Date }; paymentMethod?: { brand: string; expires: string; last4: string }; plan?: string; price?: number; renewsAt: Date; summary?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The current plan and its price, when it renews, the next invoice and the payment method on file, with actions to manage them." }, { "name": "billing-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing/billing-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing/billing-03.tsx" } ], "meta": { "shows": "Recent invoices with their status and amount, what is outstanding and a PDF download for each one.", "size": "half", "usedWith": [ "billing-02", "billing-05" ], "component": "Billing3", "props": "{ currency?: string; invoices?: { amount: number; date: Date; description: string; detail?: string; id: string; number: string; status: \"failed\" | \"paid\" | \"draft\" | \"due\" | \"overdue\" | \"uncollectible\" | \"void\" }[]; onDownload?: (id: string) => void; onViewAll?: () => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Recent invoices with their status and amount, what is outstanding and a PDF download for each one." }, { "name": "billing-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing/billing-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing/billing-04.tsx" } ], "meta": { "shows": "Monthly and annual recurring revenue, revenue per account and net revenue retention, each with its change from the previous month.", "size": "full", "usedWith": [ "billing-01", "chart-panel-01", "retention-03" ], "component": "Billing4", "props": "{ comparison?: string; currency?: string; current?: { customers: number; mrr: number; netRevenueRetention: number }; description: string; previous?: { customers: number; mrr: number; netRevenueRetention: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Monthly and annual recurring revenue, revenue per account and net revenue retention, each with its change from the previous month." }, { "name": "billing-05", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/number-field.json" ], "files": [ { "path": "registry/components/dashboardblocks/billing/billing-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/billing/billing-05.tsx" } ], "meta": { "shows": "Plans side by side, monthly or yearly, with seats, what is due today and what a downgrade takes away.", "size": "full", "usedWith": [ "billing-02", "billing-03", "usage-meter-01" ], "component": "Billing5", "props": "{ currency?: string; current: { interval: \"month\" | \"year\"; planId: string; seats: number }; description: string; now: Date; onConfirm?: (change: { interval: \"month\" | \"year\"; planId: string; seats: number }) => void; onContactSales?: (planId: string) => void; periodStart: Date; plans?: { description: string; features: string[]; highlight?: string; id: string; name: string; price?: { month: number; year: number } }[]; renewsAt: Date; seatsInUse: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Plans side by side, monthly or yearly, with seats, what is due today and what a downgrade takes away." }, { "name": "insights-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/insights.json" ], "files": [ { "path": "registry/components/dashboardblocks/insights/insights-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/insights/insights-01.tsx" } ], "meta": { "shows": "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 explore.", "size": "half", "usedWith": [ "insights-02", "insights-03", "stat-group-02" ], "component": "Insights1", "props": "{ description: string; insights?: { actionLabel?: string; drivers?: { label: string; value: string; tone?: \"neutral\" | \"positive\" | \"negative\" }[]; href?: string; id: string; kind: \"neutral\" | \"positive\" | \"negative\" | \"anomaly\"; segments: (string | { text: string; tone?: \"neutral\" | \"positive\" | \"negative\" })[]; topic: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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 explore." }, { "name": "insights-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/insights.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/insights/insights-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/insights/insights-02.tsx" } ], "meta": { "shows": "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 likely causes.", "size": "half", "usedWith": [ "insights-03", "chart-panel-01", "alerts-01" ], "component": "Insights2", "props": "{ description: string; drivers?: { label: string; value: string; tone?: \"neutral\" | \"positive\" | \"negative\" }[]; explanation: (string | { text: string; tone?: \"neutral\" | \"positive\" | \"negative\" })[]; formatter?: (value: number) => string; href?: string; metric: string; onMarkExpected?: () => void; readings?: { high: number; label: string; low: number; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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 likely causes." }, { "name": "insights-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/comparison.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/insights.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/insights/insights-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/insights/insights-03.tsx" } ], "meta": { "shows": "What contributed to a change, as bars either side of zero, with a sentence naming the biggest driver and the biggest drag.", "size": "half", "usedWith": [ "insights-02", "chart-panel-01", "breakdown-01" ], "component": "Insights3", "props": "{ contributions?: { label: string; value: number }[]; description: string; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; metric: string; previous: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "What contributed to a change, as bars either side of zero, with a sentence naming the biggest driver and the biggest drag." }, { "name": "insights-04", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/insights.json" ], "files": [ { "path": "registry/components/dashboardblocks/insights/insights-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/insights/insights-04.tsx" } ], "meta": { "shows": "A short weekly summary with a headline, three takeaways and buttons to say whether it helped.", "size": "half", "usedWith": [ "insights-01", "activity-feed-04" ], "component": "Insights4", "props": "{ defaultFeedback?: null | \"helpful\" | \"not-helpful\"; headline: string; onFeedback?: (feedback: null | \"helpful\" | \"not-helpful\") => void; period: string; takeaways?: { kind: \"neutral\" | \"positive\" | \"negative\" | \"anomaly\"; segments: (string | { text: string; tone?: \"neutral\" | \"positive\" | \"negative\" })[] }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A short weekly summary with a headline, three takeaways and buttons to say whether it helped." }, { "name": "pipeline-01", "type": "registry:component", "registryDependencies": [ "button", "dropdown-menu", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/pipeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/pipeline/pipeline-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/pipeline/pipeline-01.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "pipeline-02", "pipeline-03", "funnel-01" ], "component": "Pipeline1", "props": "{ description?: string; items?: { enteredStageAt: Date; id: string; owner?: string; ownerAvatar?: string; stage: string; subtitle?: string; title: string; value?: number }[]; now: Date; onMove?: (id: string, stage: string) => void; stages: { expectedDays?: number; id: string; label: string; probability?: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "pipeline-02", "type": "registry:component", "registryDependencies": [ "card", "button", "button-group", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/pipeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/pipeline/pipeline-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/pipeline/pipeline-02.tsx" } ], "meta": { "shows": "Open value across stages, with each stage as a segment sized by value or by count.", "size": "full", "usedWith": [ "pipeline-01", "funnel-01", "stat-group-02" ], "component": "Pipeline2", "props": "{ description?: string; noun?: string; stages?: { count: number; label: string; value: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Open value across stages, with each stage as a segment sized by value or by count." }, { "name": "pipeline-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/pipeline.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/pipeline/pipeline-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/pipeline/pipeline-03.tsx" } ], "meta": { "shows": "Items that have been in a stage longer than expected, longest first, with how long they have waited and who owns them.", "size": "full", "usedWith": [ "pipeline-01", "pipeline-02" ], "component": "Pipeline3", "props": "{ description?: string; items?: { enteredStageAt: Date; id: string; owner?: string; ownerAvatar?: string; stage: string; subtitle?: string; title: string; value?: number }[]; noun?: string; now: Date; stages: { expectedDays?: number; id: string; label: string; probability?: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Items that have been in a stage longer than expected, longest first, with how long they have waited and who owns them." }, { "name": "pipeline-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/goals.json", "https://www.dashboardblocks.com/r/pipeline.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/pipeline/pipeline-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/pipeline/pipeline-04.tsx" } ], "meta": { "shows": "Closed and open deals weighted by the chance each stage closes, per owner, against their quota.", "size": "full", "usedWith": [ "pipeline-02", "forecast-03", "leaderboard-01" ], "component": "Pipeline4", "props": "{ description?: string; owners?: { avatar?: string; closed: number; deals: { stage: string; value: number }[]; name: string; quota: number }[]; stages: { expectedDays?: number; id: string; label: string; probability?: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Closed and open deals weighted by the chance each stage closes, per owner, against their quota." }, { "name": "schedule-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/schedule/schedule-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/schedule/schedule-01.tsx" } ], "meta": { "shows": "Upcoming events grouped by day, as Today, Tomorrow and then weekdays, with the event in progress marked.", "size": "half", "usedWith": [ "schedule-02", "calendar-01", "team-04" ], "component": "Schedule1", "props": "{ days?: number; events?: { allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Upcoming events grouped by day, as Today, Tomorrow and then weekdays, with the event in progress marked." }, { "name": "schedule-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/schedule/schedule-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/schedule/schedule-02.tsx" } ], "meta": { "shows": "A month calendar with a dot on each day that has events, and a list of the events on the selected day.", "size": "full", "usedWith": [ "schedule-01", "schedule-03" ], "component": "Schedule2", "props": "{ events?: { allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; onSelect?: (day: Date) => void; timeZone?: string; title: string; weekStartsOn?: 0 | 1; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A month calendar with a dot on each day that has events, and a list of the events on the selected day." }, { "name": "schedule-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/schedule/schedule-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/schedule/schedule-03.tsx" } ], "meta": { "shows": "Deadlines and renewals in date order, each with a countdown and an urgency badge.", "size": "half", "usedWith": [ "schedule-01", "billing-01", "checklist-04" ], "component": "Schedule3", "props": "{ deadlines?: { amount?: number; billed?: \"month\" | \"year\"; detail?: string; due: Date; id: string; title: string }[]; now: Date; soonDays?: number; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Deadlines and renewals in date order, each with a countdown and an urgency badge." }, { "name": "schedule-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/schedule/schedule-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/schedule/schedule-04.tsx" } ], "meta": { "shows": "The next seven days on a shared time axis, with how many events each day holds and how much of it is booked.", "size": "full", "usedWith": [ "schedule-01", "team-02" ], "component": "Schedule4", "props": "{ calendars: { color: string; name: string }[]; endHour?: number; events?: { allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; startHour?: number; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The next seven days on a shared time axis, with how many events each day holds and how much of it is booked." }, { "name": "team-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-01.tsx" } ], "meta": { "shows": "A list of members with their role, whether they are online and when they were last active.", "size": "half", "usedWith": [ "team-05", "team-06", "settings-01" ], "component": "Team1", "props": "{ description?: string; members?: { lastActive?: Date; role: string; avatar?: string; id: string; name: string; presence?: \"online\" | \"away\" | \"offline\" }[]; now: Date; onInvite?: () => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A list of members with their role, whether they are online and when they were last active." }, { "name": "team-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-02.tsx" } ], "meta": { "shows": "Work assigned to each person against their capacity on a shared scale, with anyone over capacity flagged and listed first.", "size": "half", "usedWith": [ "team-03", "kanban-01", "leaderboard-02" ], "component": "Team2", "props": "{ description?: string; people?: { assigned: number; capacity: number; role?: string; avatar?: string; id: string; name: string; presence?: \"online\" | \"away\" | \"offline\" }[]; title: string; unit: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Work assigned to each person against their capacity on a shared scale, with anyone over capacity flagged and listed first." }, { "name": "team-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-03.tsx" } ], "meta": { "shows": "How many people are online, with their avatars and the team split by presence.", "size": "half", "usedWith": [ "team-01", "team-04" ], "component": "Team3", "props": "{ description: string; people?: { avatar?: string; id: string; name: string; presence?: \"online\" | \"away\" | \"offline\" }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "How many people are online, with their avatars and the team split by presence." }, { "name": "team-04", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/progress-bar.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-04.tsx" } ], "meta": { "shows": "Who is on call now and until when, who is next, and the rest of the rota.", "size": "half", "usedWith": [ "schedule-01", "alerts-01", "team-03" ], "component": "Team4", "props": "{ description: string; now: Date; onPage?: (person: { avatar?: string; id: string; name: string; presence?: \"online\" | \"away\" | \"offline\" }) => void; shifts?: { end: Date; person: { avatar?: string; id: string; name: string; presence?: \"online\" | \"away\" | \"offline\" }; start: Date }[]; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Who is on call now and until when, who is next, and the rest of the rota." }, { "name": "team-05", "type": "registry:component", "registryDependencies": [ "checkbox", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-05.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "team-01", "settings-01", "security-02" ], "component": "Team5", "props": "{ description: string; grants?: { }; groups: { id: string; label: string; permissions: { description?: string; id: string; label: string; requires?: string }[] }[]; onSave?: (grants: { }) => void; roles?: { id: string; locked?: boolean; members: number; name: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "team-06", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/option-select.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/team/team-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/team/team-06.tsx" } ], "meta": { "shows": "A share panel for inviting people with view or edit access, changing or removing it, and choosing who the link works for.", "size": "half", "usedWith": [ "team-01", "settings-01" ], "component": "Team6", "props": "{ currentPersonId: string; description?: string; linkAccess?: \"restricted\" | \"workspace\" | \"anyone\"; linkAccessOptions?: (\"restricted\" | \"workspace\" | \"anyone\")[]; onAccessChange?: (id: string, access: null | \"edit\" | \"view\") => void; onInvite?: (email: string, access: \"edit\" | \"view\") => void; onLinkAccessChange?: (access: \"restricted\" | \"workspace\" | \"anyone\") => void; people?: { avatar?: string; email: string; id: string; name?: string; access: \"owner\" | \"edit\" | \"view\" }[]; title: string; url: string; workspace: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A share panel for inviting people with view or edit access, changing or removing it, and choosing who the link works for." }, { "name": "checklist-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/checklist.json", "https://www.dashboardblocks.com/r/progress-bar.json" ], "files": [ { "path": "registry/components/dashboardblocks/checklist/checklist-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/checklist/checklist-01.tsx" } ], "meta": { "shows": "Setup steps with a progress bar, where each step expands to show what it involves and the current step has its action.", "size": "half", "usedWith": [ "checklist-03", "onboarding-01" ], "component": "Checklist1", "props": "{ onAction?: (id: string) => void; onSkip?: (id: string) => void; steps?: { action?: string; description: string; duration?: string; id: string; optional?: boolean; state: \"done\" | \"todo\" | \"current\" | \"skipped\"; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Setup steps with a progress bar, where each step expands to show what it involves and the current step has its action." }, { "name": "checklist-02", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/checklist.json" ], "files": [ { "path": "registry/components/dashboardblocks/checklist/checklist-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/checklist/checklist-02.tsx" } ], "meta": { "shows": "The stages of a multi-stage setup as a row of rules, side by side when wide and stacked when narrow.", "size": "full", "usedWith": [ "checklist-01", "onboarding-02" ], "component": "Checklist2", "props": "{ continueLabel?: string; description: string; onContinue?: () => void; stages?: { id: string; state: \"done\" | \"todo\" | \"current\" | \"skipped\"; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The stages of a multi-stage setup as a row of rules, side by side when wide and stacked when narrow." }, { "name": "checklist-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/checklist.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/progress-bar.json" ], "files": [ { "path": "registry/components/dashboardblocks/checklist/checklist-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/checklist/checklist-03.tsx" } ], "meta": { "shows": "A small block with how many setup steps are done and the next one, to bring people back to finish.", "size": "compact", "usedWith": [ "checklist-01", "kpi-01" ], "component": "Checklist3", "props": "{ continueLabel?: string; onContinue?: () => void; steps?: { duration?: string; id: string; state: \"done\" | \"todo\" | \"current\" | \"skipped\"; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A small block with how many setup steps are done and the next one, to bring people back to finish." }, { "name": "checklist-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/checklist.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/progress-bar.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/checklist/checklist-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/checklist/checklist-04.tsx" } ], "meta": { "shows": "Tasks grouped by team with owners, due dates and checkboxes, with overdue and due-soon tasks written in colour.", "size": "half", "usedWith": [ "schedule-03", "kanban-01", "team-02" ], "component": "Checklist4", "props": "{ groups?: { name: string; tasks: { done?: boolean; due: Date; id: string; owner?: string; title: string }[] }[]; now: Date; onToggle?: (id: string, done: boolean) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Tasks grouped by team with owners, due dates and checkboxes, with overdue and due-soon tasks written in colour." }, { "name": "gauge-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/gauge.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/gauge/gauge-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/gauge/gauge-01.tsx" } ], "meta": { "shows": "A net promoter score on its full −100 to 100 scale, with the split of promoters, passives and detractors.", "size": "compact", "usedWith": [ "feedback-01", "gauge-04", "chart-panel-01" ], "component": "Gauge1", "props": "{ period: string; previous?: number; responses?: { detractors: number; passives: number; promoters: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A net promoter score on its full −100 to 100 scale, with the split of promoters, passives and detractors." }, { "name": "gauge-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/gauge.json" ], "files": [ { "path": "registry/components/dashboardblocks/gauge/gauge-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/gauge/gauge-02.tsx" } ], "meta": { "shows": "A health score weighted from its contributing factors, marked on poor, fair and good bands, with the factors that pull it down most.", "size": "half", "usedWith": [ "status-01", "metric-list-03", "alerts-01" ], "component": "Gauge2", "props": "{ bands: { from: number; label: string; to: number; tone: \"neutral\" | \"critical\" | \"positive\" | \"caution\" }[]; description: string; factors?: { detail: string; label: string; score: number; weight: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A health score weighted from its contributing factors, marked on poor, fair and good bands, with the factors that pull it down most." }, { "name": "gauge-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/gauge.json" ], "files": [ { "path": "registry/components/dashboardblocks/gauge/gauge-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/gauge/gauge-03.tsx" } ], "meta": { "shows": "CPU, memory and disk as small gauges, each in the colour of its band with warning and critical thresholds marked.", "size": "half", "usedWith": [ "realtime-01", "status-02", "alerts-01" ], "component": "Gauge3", "props": "{ description: string; placeholders?: number; resources?: { detail: string; label: string; value: number }[]; thresholds: { critical: number; warning: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "CPU, memory and disk as small gauges, each in the colour of its band with warning and critical thresholds marked." }, { "name": "gauge-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/gauge.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/gauge/gauge-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/gauge/gauge-04.tsx" } ], "meta": { "shows": "A satisfaction score on an arc with a target tick, the change since last period and the gap to target.", "size": "half", "usedWith": [ "gauge-01", "feedback-02", "goals-01" ], "component": "Gauge4", "props": "{ comparison: string; description: string; footnote?: string; formatter?: (value: number) => string; max?: number; min?: number; previous?: number; scaleFormatter?: (value: number) => string; target: number; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A satisfaction score on an arc with a target tick, the change since last period and the gap to target." }, { "name": "metric-list-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/metric-list.json" ], "files": [ { "path": "registry/components/dashboardblocks/metric-list/metric-list-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/metric-list/metric-list-01.tsx" } ], "meta": { "shows": "A list of metrics with their change and a 14-day sparkline each.", "size": "half", "usedWith": [ "stat-group-02", "metric-list-02", "chart-panel-01" ], "component": "MetricList1", "props": "{ comparison: string; labels?: string[]; metrics?: { changeType?: \"percent\" | \"points\"; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\" | \"duration\" | \"milliseconds\" | (value: number) => string; goodDirection?: \"up\" | \"down\"; history?: number[]; key: string; label: string; previous?: number; value: number }[]; period: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A list of metrics with their change and a 14-day sparkline each." }, { "name": "metric-list-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/metric-list.json" ], "files": [ { "path": "registry/components/dashboardblocks/metric-list/metric-list-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/metric-list/metric-list-02.tsx" } ], "meta": { "shows": "Metrics grouped into sections, each with a header and a count of how many improved.", "size": "half", "usedWith": [ "metric-list-01", "stat-group-01", "comparison-01" ], "component": "MetricList2", "props": "{ comparison?: string; description: string; sections?: { key: string; label: string; metrics: { changeType?: \"percent\" | \"points\"; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\" | \"duration\" | \"milliseconds\" | (value: number) => string; goodDirection?: \"up\" | \"down\"; history?: number[]; key: string; label: string; previous?: number; value: number }[] }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Metrics grouped into sections, each with a header and a count of how many improved." }, { "name": "metric-list-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/metric-list.json" ], "files": [ { "path": "registry/components/dashboardblocks/metric-list/metric-list-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/metric-list/metric-list-03.tsx" } ], "meta": { "shows": "Metrics against their targets, each with a bar, a tick at the target and a status.", "size": "half", "usedWith": [ "goals-02", "gauge-02", "metric-list-01" ], "component": "MetricList3", "props": "{ description: string; metrics?: { domain?: [number, number]; target: number; tolerance?: number; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\" | \"duration\" | \"milliseconds\" | (value: number) => string; value: number; changeType?: \"percent\" | \"points\"; goodDirection?: \"up\" | \"down\"; key: string; label: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Metrics against their targets, each with a bar, a tick at the target and a status." }, { "name": "metric-list-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/metric-list.json" ], "files": [ { "path": "registry/components/dashboardblocks/metric-list/metric-list-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/metric-list/metric-list-04.tsx" } ], "meta": { "shows": "A list of metrics where picking one charts it beside the list, against its 30-day average.", "size": "full", "usedWith": [ "stat-group-03", "metric-list-01", "chart-panel-01" ], "component": "MetricList4", "props": "{ comparison: string; defaultSelected?: string; description: string; labels: string[]; metrics?: { history: number[]; changeType?: \"percent\" | \"points\"; format?: \"number\" | \"compact\" | \"currency\" | \"currency-compact\" | \"percent\" | \"duration\" | \"milliseconds\" | (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; value: number }[]; onSelectedChange?: (key: string) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A list of metrics where picking one charts it beside the list, against its 30-day average." }, { "name": "forecast-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/forecast.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/forecast/forecast-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forecast/forecast-01.tsx" } ], "meta": { "shows": "Weekly actuals continuing into a dashed forecast, with a shaded 80% range and a marker for today.", "size": "full", "usedWith": [ "forecast-04", "chart-panel-01", "stat-group-01" ], "component": "Forecast1", "props": "{ actuals?: number[]; description: string; formatter?: (value: number) => string; horizon: number; lastDate: Date; level?: 0.8 | 0.9 | 0.95; now: Date; stepDays?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Weekly actuals continuing into a dashed forecast, with a shaded 80% range and a marker for today." }, { "name": "forecast-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/forecast.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/forecast/forecast-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forecast/forecast-02.tsx" } ], "meta": { "shows": "The running total heading for a goal line, with the forecast, its 80% range, the deadline and the date it gets there.", "size": "half", "usedWith": [ "forecast-01", "goals-01", "progress-kpi-01" ], "component": "Forecast2", "props": "{ actuals?: number[]; deadline: Date; formatter?: (value: number) => string; lastDate: Date; level?: 0.8 | 0.9 | 0.95; metric: string; now: Date; stepDays?: number; target: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The running total heading for a goal line, with the forecast, its 80% range, the deadline and the date it gets there." }, { "name": "forecast-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forecast.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/forecast/forecast-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forecast/forecast-03.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "goals-01", "goals-03", "progress-kpi-01" ], "component": "Forecast3", "props": "{ current?: number; description: string; elapsed: number; formatter?: (value: number) => string; target: number; title: string; total: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "forecast-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/forecast.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/forecast/forecast-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forecast/forecast-04.tsx" } ], "meta": { "shows": "Low, base and high growth scenarios from the last actual, as a chart and a table with when each one reaches the target.", "size": "full", "usedWith": [ "forecast-01", "forecast-02", "goals-03" ], "component": "Forecast4", "props": "{ actuals?: { label: string; value: number }[]; description: string; formatter?: (value: number) => string; horizon: string[]; scenarios: { low: { note: string; rate: number }; base: { note: string; rate: number }; high: { note: string; rate: number } }; target?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Low, base and high growth scenarios from the last actual, as a chart and a table with when each one reaches the target." }, { "name": "retention-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/heatmap.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/retention.json" ], "files": [ { "path": "registry/components/dashboardblocks/retention/retention-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/retention/retention-01.tsx" } ], "meta": { "shows": "A retention triangle with a row per cohort and a weighted average row, shaded by share.", "size": "full", "usedWith": [ "retention-02", "heatmap-02" ], "component": "Retention1", "props": "{ cohorts?: { label: string; size: number; retained: number[]; color?: string; icon?: ReactNode; eligible?: number[]; filling?: boolean }[]; description: string; mode?: \"percent\" | \"count\"; periodName?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A retention triangle with a row per cohort and a weighted average row, shaded by share." }, { "name": "retention-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/retention.json" ], "files": [ { "path": "registry/components/dashboardblocks/retention/retention-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/retention/retention-02.tsx" } ], "meta": { "shows": "Every cohort's retention curve, with one highlighted against the average and where the average levels off.", "size": "full", "usedWith": [ "retention-01", "retention-04" ], "component": "Retention2", "props": "{ cohorts?: { label: string; size: number; retained: number[]; color?: string; icon?: ReactNode; eligible?: number[]; filling?: boolean }[]; description: string; highlight?: number; link?: { href: string; label: string }; periodName?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Every cohort's retention curve, with one highlighted against the average and where the average levels off." }, { "name": "retention-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/retention.json" ], "files": [ { "path": "registry/components/dashboardblocks/retention/retention-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/retention/retention-03.tsx" } ], "meta": { "shows": "Day 1, 7 and 30 retention for the latest cohort, with the change against the cohort before written out.", "size": "compact", "usedWith": [ "heatmap-01", "retention-01", "funnel-01" ], "component": "Retention3", "props": "{ description: string; milestones?: { label: string; current: number; previous: number }[]; placeholders?: number; previousLabel?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Day 1, 7 and 30 retention for the latest cohort, with the change against the cohort before written out." }, { "name": "retention-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/retention.json" ], "files": [ { "path": "registry/components/dashboardblocks/retention/retention-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/retention/retention-04.tsx" } ], "meta": { "shows": "Users gained above the axis and lost below it, with the net change and the quick ratio.", "size": "full", "usedWith": [ "retention-01", "stat-group-02" ], "component": "Retention4", "props": "{ description: string; periods?: { label: string; churned: number; new: number; resurrected: number }[]; periodName?: string; title: string; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Users gained above the axis and lost below it, with the net change and the quick ratio." }, { "name": "distribution-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/distribution.json", "https://www.dashboardblocks.com/r/kpi.json" ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "distribution-03", "alerts-02" ], "component": "Distribution1", "props": "{ bins?: { x0: number; x1: number; count: number }[]; description: string; formatter?: (value: number) => string; limit?: { label: string; value: number }; title: string; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/distribution/distribution-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/distribution/distribution-01.tsx" } ], "description": "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." }, { "name": "distribution-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/distribution.json" ], "meta": { "shows": "A box and whiskers per group on a shared axis, to compare spread and median across groups.", "size": "half", "usedWith": [ "distribution-03", "data-table-04" ], "component": "Distribution2", "props": "{ description: string; formatter?: (value: number) => string; groups?: { count: number; high: number; label: string; low: number; median: number; q1: number; q3: number }[]; tickFormatter?: (value: number) => string; whiskerLabel?: string; title: string; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/distribution/distribution-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/distribution/distribution-02.tsx" } ], "description": "A box and whiskers per group on a shared axis, to compare spread and median across groups." }, { "name": "distribution-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/distribution.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/distribution/distribution-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/distribution/distribution-03.tsx" } ], "meta": { "shows": "The median, mean and percentiles of a set of values, with a note when a long tail pulls the mean away.", "size": "half", "usedWith": [ "distribution-01", "stat-group-01" ], "component": "Distribution3", "props": "{ description: string; formatter?: (value: number) => string; title: string; unit?: string; values?: number[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The median, mean and percentiles of a set of values, with a note when a long tail pulls the mean away." }, { "name": "distribution-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/distribution.json", "https://www.dashboardblocks.com/r/kpi.json" ], "meta": { "shows": "This week's distribution against last week's as a dashed line, with both medians and the change at the median and p90.", "size": "half", "usedWith": [ "distribution-01", "stat-group-02" ], "component": "Distribution4", "props": "{ current?: number[]; currentLabel?: string; description: string; edges: number[]; formatter?: (value: number) => string; lowerIsBetter?: boolean; previous?: number[]; previousLabel?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/distribution/distribution-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/distribution/distribution-04.tsx" } ], "description": "This week's distribution against last week's as a dashed line, with both medians and the change at the median and p90." }, { "name": "spend-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/spend.json" ], "files": [ { "path": "registry/components/dashboardblocks/spend/spend-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/spend/spend-01.tsx" } ], "meta": { "shows": "Spend so far against the month's budget, with the projected month end and what is left to spend per day.", "size": "half", "usedWith": [ "spend-03", "forecast-03" ], "component": "Spend1", "props": "{ budget: number; currency?: string; description: string; now: Date; periodEnd: Date; periodStart: Date; spent?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Spend so far against the month's budget, with the projected month end and what is left to spend per day." }, { "name": "spend-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/spend.json" ], "files": [ { "path": "registry/components/dashboardblocks/spend/spend-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/spend/spend-02.tsx" } ], "meta": { "shows": "The total spent and where it is heading, then one budget bar per service, naming the ones over budget.", "size": "half", "usedWith": [ "spend-01", "data-table-04" ], "component": "Spend2", "props": "{ currency?: string; description?: string; elapsed: number; lines?: { budget: number; label: string; spent: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The total spent and where it is heading, then one budget bar per service, naming the ones over budget." }, { "name": "spend-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/spend.json" ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "spend-01", "spend-02" ], "component": "Spend3", "props": "{ currency?: string; description: string; periods?: { budget: number; label: string; spent: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/spend/spend-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/spend/spend-03.tsx" } ], "description": "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." }, { "name": "spend-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/spend.json" ], "meta": { "shows": "The cash balance, the average net burn and the months of runway left, with the balance projected to the month it runs out.", "size": "half", "usedWith": [ "forecast-02", "billing-04" ], "component": "Spend4", "props": "{ balances?: number[]; currency?: string; description: string; lastMonth: Date; trailing?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/spend/spend-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/spend/spend-04.tsx" } ], "description": "The cash balance, the average net burn and the months of runway left, with the balance projected to the month it runs out." }, { "name": "flow-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/flow.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/flow/flow-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/flow/flow-01.tsx" } ], "meta": { "shows": "Sessions from each source through the landing page, to signing up, browsing on or bouncing.", "size": "full", "usedWith": [ "funnel-01", "chart-panel-02", "geo-02" ], "component": "Flow1", "props": "{ description: string; links?: { source: string; target: string; value: number }[]; nodes?: { color?: string; id: string; kind?: \"default\" | \"exit\" | \"gap\"; label: string }[]; goal: string; title: string; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Sessions from each source through the landing page, to signing up, browsing on or bouncing." }, { "name": "flow-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/flow.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/flow/flow-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/flow/flow-02.tsx" } ], "meta": { "shows": "Where visitors go in their first pages after landing, with the ones who left at each step.", "size": "full", "usedWith": [ "flow-04", "funnel-01" ], "component": "Flow2", "props": "{ description: string; links?: { source: string; target: string; value: number }[]; nodes?: { color?: string; id: string; kind?: \"default\" | \"exit\" | \"gap\"; label: string }[]; title: string; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Where visitors go in their first pages after landing, with the ones who left at each step." }, { "name": "flow-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/flow.json", "https://www.dashboardblocks.com/r/kpi.json" ], "meta": { "shows": "Revenue streams into total revenue, then out to costs and profit, with each part's share of revenue.", "size": "full", "usedWith": [ "spend-02", "billing-01" ], "component": "Flow3", "props": "{ currency?: string; description: string; links?: { source: string; target: string; value: number }[]; nodes?: { color?: string; id: string; kind?: \"default\" | \"exit\" | \"gap\"; label: string }[]; totals: { grossProfit?: string; profit: string; revenue: string }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "files": [ { "path": "registry/components/dashboardblocks/flow/flow-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/flow/flow-03.tsx" } ], "description": "Revenue streams into total revenue, then out to costs and profit, with each part's share of revenue." }, { "name": "flow-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/flow.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/flow/flow-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/flow/flow-04.tsx" } ], "meta": { "shows": "The most common routes as steps, ranked by how many people took them, with how often each reaches the goal.", "size": "full", "usedWith": [ "flow-02", "funnel-03" ], "component": "Flow4", "props": "{ description: string; goal: string; paths?: { converted: number; count: number; steps: string[] }[]; title: string; total?: number; unit?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The most common routes as steps, ranked by how many people took them, with how often each reaches the goal." }, { "name": "timeline-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/timeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/timeline/timeline-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/timeline/timeline-01.tsx" } ], "meta": { "shows": "Projects grouped by team, each a bar from start to end filled to its progress, with a line for today.", "size": "full", "usedWith": [ "timeline-02", "timeline-04", "pipeline-01" ], "component": "Timeline1", "props": "{ description?: string; end: Date; items?: { color?: string; end: Date; group?: string; id: string; label: string; progress?: number; start: Date; status?: \"done\" | \"in-progress\" | \"planned\" | \"at-risk\" }[]; now: Date; start: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Projects grouped by team, each a bar from start to end filled to its progress, with a line for today." }, { "name": "timeline-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/timeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/timeline/timeline-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/timeline/timeline-02.tsx" } ], "meta": { "shows": "A launch plan as a list on a rail, with the next milestone highlighted and how soon or how late each one is.", "size": "half", "usedWith": [ "timeline-01", "checklist-01" ], "component": "Timeline2", "props": "{ description: string; milestones?: { date?: Date; description?: string; id: string; label: string; status: \"done\" | \"in-progress\" | \"planned\" | \"at-risk\" }[]; now: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A launch plan as a list on a rail, with the next milestone highlighted and how soon or how late each one is." }, { "name": "timeline-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/timeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/timeline/timeline-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/timeline/timeline-03.tsx" } ], "meta": { "shows": "Every release on one line, sized as major, minor or patch, with the median gap and when the next one is due.", "size": "full", "usedWith": [ "deployments-01", "deployments-03" ], "component": "Timeline3", "props": "{ description?: string; end: Date; now: Date; releases?: { date: Date; kind: \"major\" | \"minor\" | \"patch\"; version: string; summary?: string }[]; start: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Every release on one line, sized as major, minor or patch, with the median gap and when the next one is due." }, { "name": "timeline-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/timeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/timeline/timeline-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/timeline/timeline-04.tsx" } ], "meta": { "shows": "Each phase's plan as a dashed outline with what actually happened as a bar beneath it, and how many days it slipped.", "size": "full", "usedWith": [ "timeline-01", "timeline-02" ], "component": "Timeline4", "props": "{ description: string; end: Date; now: Date; phases?: { actual?: { end?: Date; start: Date }; id: string; label: string; planned: { end: Date; start: Date } }[]; start: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each phase's plan as a dashed outline with what actually happened as a bar beneath it, and how many days it slipped." }, { "name": "realtime-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/leaderboard.json", "https://www.dashboardblocks.com/r/realtime.json" ], "files": [ { "path": "registry/components/dashboardblocks/realtime/realtime-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/realtime/realtime-01.tsx" } ], "meta": { "shows": "Active users now, page views per second over the last minute and the pages with the most people on them.", "size": "compact", "usedWith": [ "chart-panel-02", "geo-03" ], "component": "Realtime1", "props": "{ activeUsers?: number; description: string; pageViews?: number[]; pages?: { path: string; users: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Active users now, page views per second over the last minute and the pages with the most people on them." }, { "name": "realtime-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/realtime.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/realtime/realtime-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/realtime/realtime-02.tsx" } ], "meta": { "shows": "Requests per second over the last five minutes, with the peak, the error rate and errors on their own scale.", "size": "full", "usedWith": [ "status-02", "alerts-01", "deployments-03" ], "component": "Realtime2", "props": "{ description: string; samples?: { errors: number; requests: number }[]; interval?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Requests per second over the last five minutes, with the peak, the error rate and errors on their own scale." }, { "name": "realtime-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/realtime.json" ], "files": [ { "path": "registry/components/dashboardblocks/realtime/realtime-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/realtime/realtime-03.tsx" } ], "meta": { "shows": "Orders, sign-ups, refunds and messages as they arrive, newest first, with a pause button.", "size": "half", "usedWith": [ "realtime-04", "activity-feed-01" ], "component": "Realtime3", "props": "{ description: string; events?: { at: Date; detail: string; id: string; kind: \"order\" | \"signup\" | \"refund\" | \"message\"; label: string }[]; limit?: number; now: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Orders, sign-ups, refunds and messages as they arrive, newest first, with a pause button." }, { "name": "realtime-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/realtime.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/realtime/realtime-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/realtime/realtime-04.tsx" } ], "meta": { "shows": "Running totals since midnight against yesterday at the same time, with orders per hour beside yesterday as a dashed line.", "size": "half", "usedWith": [ "realtime-03", "chart-panel-01" ], "component": "Realtime4", "props": "{ description?: string; hourly?: number[]; hourlyLabel?: string; metrics?: { format?: (value: number) => string; id: string; label: string; today: number; yesterday: number }[]; title: string; yesterdayHourly?: number[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Running totals since midnight against yesterday at the same time, with orders per hour beside yesterday as a dashed line." }, { "name": "feedback-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/feedback.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/use-reveal.json" ], "files": [ { "path": "registry/components/dashboardblocks/feedback/feedback-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/feedback/feedback-01.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "feedback-03", "feedback-04" ], "component": "Feedback1", "props": "{ comparison?: string; counts?: number[]; description: string; previousAverage?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "feedback-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/feedback.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/feedback/feedback-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/feedback/feedback-02.tsx" } ], "meta": { "shows": "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.", "size": "half", "usedWith": [ "feedback-03", "feedback-01" ], "component": "Feedback2", "props": "{ description: string; title: string; topics?: { label: string; negative: number; neutral: number; positive: number }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "feedback-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/feedback.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/feedback/feedback-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/feedback/feedback-03.tsx" } ], "meta": { "shows": "The latest reviews with their rating and source, flagging low ratings still waiting for a reply.", "size": "half", "usedWith": [ "feedback-01", "feedback-02" ], "component": "Feedback3", "props": "{ description: string; now: Date; reviews?: { author: string; avatar?: string; date: Date; id: string; rating: number; replied?: boolean; source: string; text: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The latest reviews with their rating and source, flagging low ratings still waiting for a reply." }, { "name": "feedback-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/feedback/feedback-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/feedback/feedback-04.tsx" } ], "meta": { "shows": "Weekly customer satisfaction against a target, with the change on the week before and how many weeks met it.", "size": "half", "usedWith": [ "feedback-01", "feedback-03" ], "component": "Feedback4", "props": "{ description: string; periods?: { label: string; responses: number; satisfied: number }[]; target?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Weekly customer satisfaction against a target, with the change on the week before and how many weeks met it." }, { "name": "deployments-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/deployments.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/deployments/deployments-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/deployments/deployments-01.tsx" } ], "meta": { "shows": "The latest builds, each with its commit, environment, author, duration and status.", "size": "full", "usedWith": [ "deployments-02", "deployments-04", "activity-feed-05" ], "component": "Deployments1", "props": "{ deployments?: { author: string; authorAvatar?: string; duration: number; environment: string; id: string; message: string; sha: string; startedAt: Date; status: \"success\" | \"failed\" | \"running\" | \"queued\" | \"rolled-back\" }[]; description?: string; now: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The latest builds, each with its commit, environment, author, duration and status." }, { "name": "deployments-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/deployments.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/deployments/deployments-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/deployments/deployments-02.tsx" } ], "meta": { "shows": "What each environment is running, and how many commits are waiting to be promoted to the next one.", "size": "half", "usedWith": [ "deployments-01", "deployments-04", "status-01" ], "component": "Deployments2", "props": "{ ahead?: number[]; description?: string; environments?: { deployedAt: Date; deployedBy: string; id: string; name: string; sha: string; status: \"success\" | \"failed\" | \"running\" | \"queued\" | \"rolled-back\"; version: string }[]; now: Date; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "What each environment is running, and how many commits are waiting to be promoted to the next one." }, { "name": "deployments-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/deployments.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/deployments/deployments-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/deployments/deployments-03.tsx" } ], "meta": { "shows": "The four DORA delivery metrics, each with its performance band and the change on the previous period.", "size": "full", "usedWith": [ "deployments-01", "deployments-04", "chart-panel-01" ], "component": "Deployments3", "props": "{ comparison?: string; current?: { changeFailureRate: number; deploysPerDay: number; leadTimeHours: number; restoreHours: number }; description?: string; previous?: { changeFailureRate: number; deploysPerDay: number; leadTimeHours: number; restoreHours: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The four DORA delivery metrics, each with its performance band and the change on the previous period." }, { "name": "deployments-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/deployments.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/deployments/deployments-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/deployments/deployments-04.tsx" } ], "meta": { "shows": "The latest runs of each pipeline as a strip of results, with the pass rate and median duration.", "size": "half", "usedWith": [ "deployments-01", "deployments-03" ], "component": "Deployments4", "props": "{ description?: string; pipelines?: { medianDuration: number; name: string; runs: (\"success\" | \"failed\" | \"running\" | \"queued\" | \"rolled-back\")[] }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The latest runs of each pipeline as a strip of results, with the pass rate and median duration." }, { "name": "scatter-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/scatter.json" ], "files": [ { "path": "registry/components/dashboardblocks/scatter/scatter-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/scatter/scatter-01.tsx" } ], "meta": { "shows": "Pages plotted by load time and conversion rate, grouped by section, with a trend line and how strong the link is.", "size": "half", "usedWith": [ "data-table-03", "distribution-01" ], "component": "Scatter1", "props": "{ description: string; groups: string[]; points?: { group: string; label: string; x: number; y: number }[]; title: string; x: { format: (value: number) => string; label: string }; y: { format: (value: number) => string; formatChange?: (value: number) => string; label: string }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Pages plotted by load time and conversion rate, grouped by section, with a trend line and how strong the link is." }, { "name": "scatter-02", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/scatter.json" ], "files": [ { "path": "registry/components/dashboardblocks/scatter/scatter-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/scatter/scatter-02.tsx" } ], "meta": { "shows": "Features plotted by usage and satisfaction, split into four labelled quadrants with each point named.", "size": "half", "usedWith": [ "leaderboard-01", "data-table-02" ], "component": "Scatter2", "props": "{ description: string; items?: { label: string; x: number; y: number }[]; quadrants: [string, string, string, string]; title: string; split?: { x: number; y: number }; x: { domain: [number, number]; format: (value: number) => string; label: string; ticks?: number[] }; y: { domain: [number, number]; format: (value: number) => string; label: string; ticks?: number[] }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Features plotted by usage and satisfaction, split into four labelled quadrants with each point named." }, { "name": "scatter-03", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/scatter.json" ], "files": [ { "path": "registry/components/dashboardblocks/scatter/scatter-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/scatter/scatter-03.tsx" } ], "meta": { "shows": "Campaigns plotted by cost per acquisition and conversion rate, sized by spend and coloured by channel, against a target cost.", "size": "full", "usedWith": [ "data-table-03", "spend-02" ], "component": "Scatter3", "props": "{ campaigns?: { channel: string; cpa: number; conversion: number; label: string; spend: number }[]; channels: string[]; description: string; status?: \"loading\" | \"error\"; target?: { label: string; value: number }; title: string; errorMessage?: string }" }, "description": "Campaigns plotted by cost per acquisition and conversion rate, sized by spend and coloured by channel, against a target cost." }, { "name": "scatter-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/scatter.json" ], "files": [ { "path": "registry/components/dashboardblocks/scatter/scatter-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/scatter/scatter-04.tsx" } ], "meta": { "shows": "Open risks on a likelihood by impact grid, shaded by level, with the risks in a selected cell listed.", "size": "full", "usedWith": [ "alerts-01", "data-table-04" ], "component": "Scatter4", "props": "{ description: string; risks?: { id: string; impact: number; likelihood: number; owner?: string; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Open risks on a likelihood by impact grid, shaded by level, with the risks in a selected cell listed." }, { "name": "security-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-01.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "security-02", "security-04", "alerts-01" ], "component": "Security1", "props": "{ days?: { blocked: number; failed: number; label: string; succeeded: number }[]; description: string; mfaCoverage?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "security-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/security.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-02.tsx" } ], "meta": { "shows": "Changes to access, keys and settings, newest first, with a switch to show warnings only.", "size": "full", "usedWith": [ "security-01", "security-03", "activity-feed-01" ], "component": "Security2", "props": "{ description?: string; events?: { actor: string; action: string; at: Date; id: string; ip?: string; severity: \"warning\" | \"info\" | \"critical\"; target?: string }[]; now: Date; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Changes to access, keys and settings, newest first, with a switch to show warnings only." }, { "name": "security-03", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/security.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-03.tsx" } ], "meta": { "shows": "The devices signed in to an account, with where and when each was last active, and buttons to sign them out.", "size": "half", "usedWith": [ "security-05", "security-02" ], "component": "Security3", "props": "{ description?: string; now: Date; onSignOut?: (id: string) => void; sessions?: { client: string; current?: boolean; device: \"desktop\" | \"mobile\"; id: string; lastActive: Date; location: string }[]; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The devices signed in to an account, with where and when each was last active, and buttons to sign them out." }, { "name": "security-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/gauge.json", "https://www.dashboardblocks.com/r/security.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-04.tsx" } ], "meta": { "shows": "A security score on a banded gauge, built from workspace checks, with failing checks first and what to do about each.", "size": "half", "usedWith": [ "security-05", "security-06", "security-01" ], "component": "Security4", "props": "{ checks?: { detail: string; id: string; label: string; result: \"pass\" | \"warn\" | \"fail\"; weight?: number }[]; description: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A security score on a banded gauge, built from workspace checks, with failing checks first and what to do about each." }, { "name": "security-05", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-05.tsx" } ], "meta": { "shows": "Setting up two-factor sign-in with an authenticator app, security keys and passkeys, and recovery codes shown once.", "size": "half", "usedWith": [ "security-03", "security-04" ], "component": "Security5", "props": "{ authenticatorAddedAt?: Date; description: string; onAddSecurityKey?: () => void; onRemoveAuthenticator?: () => void; onRemoveSecurityKey?: (id: string) => void; onRegenerateRecoveryCodes?: () => void; onVerify?: (code: string) => boolean | Promise; recoveryCodes: string[]; recoveryCodesLeft?: number; required?: boolean; securityKeys?: { addedAt: Date; id: string; name: string }[]; setup: { qrCode: ReactNode; secret: string }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Setting up two-factor sign-in with an authenticator app, security keys and passkeys, and recovery codes shown once." }, { "name": "security-06", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/option-select.json", "switch", "textarea", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/settings.json" ], "files": [ { "path": "registry/components/dashboardblocks/security/security-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/security/security-06.tsx" } ], "meta": { "shows": "A single sign-on connection with details to copy into your identity provider, verified domains, and a switch to require it.", "size": "half", "usedWith": [ "security-04", "team-05", "settings-01" ], "component": "Security6", "props": "{ acsUrl: string; connection?: { certificate: string; issuer: string; provider: string; signInUrl: string }; connectionStatus?: \"error\" | \"connected\" | \"disconnected\" | \"importing\" | \"paused\" | \"revoked\"; description: string; domains?: { domain: string; id: string; txtRecord: string; verified: boolean }[]; enforced?: boolean; entityId: string; onEnforcedChange?: (enforced: boolean) => void; onSave?: (connection: { certificate: string; issuer: string; provider: string; signInUrl: string }) => void; onVerifyDomain?: (id: string) => boolean | Promise; providers: string[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A single sign-on connection with details to copy into your identity provider, verified domains, and a switch to require it." }, { "name": "inventory-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/inventory.json" ], "files": [ { "path": "registry/components/dashboardblocks/inventory/inventory-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/inventory/inventory-01.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "inventory-02", "inventory-03", "inventory-04" ], "component": "Inventory1", "props": "{ description?: string; items?: { dailyDemand: number; leadTimeDays: number; name: string; onHand: number; onOrder?: number; reorderPoint: number; sku: string }[]; targetDays?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "inventory-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/goals.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/inventory/inventory-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/inventory/inventory-02.tsx" } ], "meta": { "shows": "Units stored against capacity in each warehouse, with what arrives this week and which will be nearly full.", "size": "half", "usedWith": [ "inventory-01", "inventory-03" ], "component": "Inventory2", "props": "{ description?: string; title: string; warehouses?: { capacity: number; inbound?: number; location: string; name: string; stored: number }[]; warnAt?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Units stored against capacity in each warehouse, with what arrives this week and which will be nearly full." }, { "name": "inventory-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/breakdown.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/inventory.json" ], "files": [ { "path": "registry/components/dashboardblocks/inventory/inventory-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/inventory/inventory-03.tsx" } ], "meta": { "shows": "Every SKU by stock status, with the value of stock on hand and how many times a year it turns over.", "size": "full", "usedWith": [ "inventory-01", "inventory-02", "stat-group-02" ], "component": "Inventory3", "props": "{ annualCogs?: number; counts?: { low: number; out: number; ok: number; over: number }; currency?: string; description?: string; title: string; value?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Every SKU by stock status, with the value of stock on hand and how many times a year it turns over." }, { "name": "inventory-04", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/inventory.json" ], "files": [ { "path": "registry/components/dashboardblocks/inventory/inventory-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/inventory/inventory-04.tsx" } ], "meta": { "shows": "One item's stock day by day at its current demand, with incoming orders, the reorder point and when it runs out.", "size": "full", "usedWith": [ "inventory-01", "inventory-03" ], "component": "Inventory4", "props": "{ dailyDemand: number; description?: string; horizon?: number; incoming?: { day: number; quantity: number }[]; now: Date; onHand?: number; product: string; reorderPoint: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "One item's stock day by day at its current demand, with incoming orders, the reorder point and when it runs out." }, { "name": "ai-usage-01", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-usage.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/chart-panel.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-usage/ai-usage-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-usage/ai-usage-01.tsx" } ], "meta": { "shows": "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.", "size": "full", "usedWith": [ "ai-usage-02", "ai-usage-03", "ai-usage-04" ], "component": "AiUsage1", "props": "{ days?: { label: string; tokens: Record }[]; description: string; models?: { cost: number; id: string; label: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "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." }, { "name": "ai-usage-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-usage.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-usage/ai-usage-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-usage/ai-usage-02.tsx" } ], "meta": { "shows": "Model spend by product feature, with each feature's input, cached and output tokens and its cost per thousand requests.", "size": "full", "usedWith": [ "ai-usage-01", "ai-usage-04", "spend-01" ], "component": "AiUsage2", "props": "{ description?: string; features?: { cost: number; href?: string; label: string; requests: number; tokens: { cached?: number; input: number; output: number } }[]; period?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Model spend by product feature, with each feature's input, cached and output tokens and its cost per thousand requests." }, { "name": "ai-usage-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-usage.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-usage/ai-usage-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-usage/ai-usage-03.tsx" } ], "meta": { "shows": "Requests, time to first token from the median to the 95th percentile, output speed and error rate for each model.", "size": "full", "usedWith": [ "ai-usage-01", "ai-usage-02" ], "component": "AiUsage3", "props": "{ description?: string; errorThreshold?: number; models?: { errorRate: number; href?: string; label: string; outputSpeed: number; requests: number; ttftP50: number; ttftP95: number }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Requests, time to first token from the median to the 95th percentile, output speed and error rate for each model." }, { "name": "ai-usage-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-usage.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-usage/ai-usage-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-usage/ai-usage-04.tsx" } ], "meta": { "shows": "The share of input tokens served from the cache, what it saved and what the tokens would have cost without it.", "size": "half", "usedWith": [ "ai-usage-01", "ai-usage-02" ], "component": "AiUsage4", "props": "{ comparison?: string; description: string; previousHitRate?: number; prices: { cached?: number; input: number; output: number }; title: string; tokens?: { cached?: number; input: number; output: number }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "The share of input tokens served from the cache, what it saved and what the tokens would have cost without it." }, { "name": "settings-01", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-01.tsx" } ], "meta": { "shows": "Invite people by email with a role, change roles, remove members and resend or revoke pending invites, counted against the plan's seats.", "size": "full", "usedWith": [ "team-05", "billing-01", "team-01" ], "component": "Settings1", "props": "{ currentMemberId: string; description: string; invites?: { email: string; id: string; role: \"owner\" | \"admin\" | \"member\" | \"viewer\"; sentAt: Date }[]; members?: { avatar?: string; email: string; id: string; name: string; role: \"owner\" | \"admin\" | \"member\" | \"viewer\" }[]; now: Date; onInvite?: (email: string, role: \"owner\" | \"admin\" | \"member\" | \"viewer\") => void; onRemoveMember?: (id: string) => void; onResendInvite?: (id: string) => void; onRevokeInvite?: (id: string) => void; onRoleChange?: (id: string, role: \"owner\" | \"admin\" | \"member\" | \"viewer\") => void; seats?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Invite people by email with a role, change roles, remove members and resend or revoke pending invites, counted against the plan's seats." }, { "name": "settings-02", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-02.tsx" } ], "meta": { "shows": "API keys with their access, last use and creator, with unused keys flagged and a new key shown once with a copy button.", "size": "full", "usedWith": [ "settings-05", "security-02" ], "component": "Settings2", "props": "{ createKey: (name: string, scope: \"read\" | \"write\") => { key: { createdAt: Date; createdBy: string; id: string; lastUsedAt?: Date; masked: string; name: string; scope: \"read\" | \"write\" }; secret: string }; description?: string; keys?: { createdAt: Date; createdBy: string; id: string; lastUsedAt?: Date; masked: string; name: string; scope: \"read\" | \"write\" }[]; now: Date; onRevoke?: (id: string) => void; staleAfterDays?: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "API keys with their access, last use and creator, with unused keys flagged and a new key shown once with a copy button." }, { "name": "settings-03", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/attempt.json", "https://www.dashboardblocks.com/r/announcements.json", "switch", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-03.tsx" } ], "meta": { "shows": "Each notification against each channel, grouped by topic, with a switch for each one and a switch for the whole channel.", "size": "full", "usedWith": [ "notifications-01", "settings-07" ], "component": "Settings3", "props": "{ channels: { id: string; label: string; unavailable?: ReactNode }[]; description: string; groups?: { events: { description?: string; id: string; label: string }[]; id: string; label: string }[]; onChange?: (preferences: { }) => void | { status: \"error\"; message: string } | Promise; preferences?: { }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Each notification against each channel, grouped by topic, with a switch for each one and a switch for the whole channel." }, { "name": "settings-04", "type": "registry:component", "registryDependencies": [ "button", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/brand-logos.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-04.tsx" } ], "meta": { "shows": "Connected and available integrations in tabs, one row each with what it does, its status and a prompt for ones that need reconnecting.", "size": "half", "usedWith": [ "settings-05", "settings-02" ], "component": "Settings4", "props": "{ description: string; integrations?: { category: string; description: string; detail?: string; id: string; logo?: ReactNode; name: string; status: \"error\" | \"connected\" | \"disconnected\" | \"importing\" | \"paused\" | \"revoked\" }[]; onConfigure?: (id: string) => void; onConnect?: (id: string) => void; onDisconnect?: (id: string) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Connected and available integrations in tabs, one row each with what it does, its status and a prompt for ones that need reconnecting." }, { "name": "settings-05", "type": "registry:component", "dependencies": [ "recharts" ], "registryDependencies": [ "button", "switch", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/chart.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/settings.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-05.tsx" } ], "meta": { "shows": "Webhook endpoints with the events they receive, a chart of recent deliveries with each one in a tooltip, the delivery rate, and a switch to pause each one.", "size": "full", "usedWith": [ "settings-02", "settings-04", "status-01" ], "component": "Settings5", "props": "{ description?: string; endpoints?: { deliveries: { at: Date; status: number }[]; enabled: boolean; events: string[]; id: string; url: string }[]; now: Date; onAdd?: () => void; onEnabledChange?: (id: string, enabled: boolean) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Webhook endpoints with the events they receive, a chart of recent deliveries with each one in a tooltip, the delivery rate, and a switch to pause each one." }, { "name": "settings-06", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/settings.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-06.tsx" } ], "meta": { "shows": "Transferring, archiving and deleting a workspace, with deletion confirmed by typing the workspace name.", "size": "half", "usedWith": [ "settings-01", "security-06" ], "component": "Settings6", "props": "{ actions: { action: string; confirm?: boolean; description: string; id: string; label: string }[]; description: string; onAction?: (id: string) => void; title: string; workspace: string }" }, "description": "Transferring, archiving and deleting a workspace, with deletion confirmed by typing the workspace name." }, { "name": "settings-07", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/announcements.json", "button", "field", "input", "https://www.dashboardblocks.com/r/option-select.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/settings/settings-07.tsx", "type": "registry:component", "target": "@components/dashboardblocks/settings/settings-07.tsx" } ], "meta": { "shows": "A profile form with your photo, name, email, time zone and theme, a save bar that shows once something changes, and a new email confirmed before it takes effect.", "size": "half", "usedWith": [ "security-05", "settings-03" ], "component": "Settings7", "props": "{ description: string; onAvatarChange?: (file: null | File) => void; onSave?: (profile: { avatar?: string; email: string; name: string; theme: \"light\" | \"dark\" | \"system\"; timeZone: string }) => void | { name?: string; email?: string } | Promise; profile?: { avatar?: string; email: string; name: string; theme: \"light\" | \"dark\" | \"system\"; timeZone: string }; timeZones: { label: string; value: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A profile form with your photo, name, email, time zone and theme, a save bar that shows once something changes, and a new email confirmed before it takes effect." }, { "name": "app-shell-01", "type": "registry:component", "registryDependencies": [ "separator", "sidebar", "https://www.dashboardblocks.com/r/app-shell.json" ], "files": [ { "path": "registry/components/dashboardblocks/app-shell/app-shell-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/app-shell/app-shell-01.tsx" } ], "meta": { "shows": "A sidebar app shell with a workspace switcher, navigation sections with count badges, a user menu and a top bar with breadcrumbs, search and notifications.", "size": "page", "usedWith": [ "app-shell-02" ], "component": "AppShell1", "props": "{ banner?: ReactNode; breadcrumbs: { href?: string; label: string }[]; children?: ReactNode; notificationCount?: number; onCreateWorkspace?: () => void; onNotificationsClick?: () => void; onSearch?: () => void; onSignOut?: () => void; onWorkspaceChange?: (id: string) => void; panel?: { children: ReactNode; label: string; icon?: ReactNode; onOpenChange: (open: boolean) => void; open: boolean; shortcut?: string }; pathname: string; searchPlaceholder?: string; secondarySections?: { items: { badge?: ReactNode; href?: string; icon: ReactNode; items?: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; onSelect?: () => void; title: string }[]; label?: string }[]; sections: { items: { badge?: ReactNode; href?: string; icon: ReactNode; items?: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; onSelect?: () => void; title: string }[]; label?: string }[]; theme?: { onValueChange: (theme: \"light\" | \"dark\" | \"system\") => void; value: \"light\" | \"dark\" | \"system\" }; user: { avatar?: string; email: string; name: string }; userLinks: { href: string; icon: ReactNode; label: string }[]; workspaceId?: string; workspaces: { id: string; logo: ReactNode; name: string; plan?: string }[] }" }, "description": "A sidebar app shell with a workspace switcher, navigation sections with count badges, a user menu and a top bar with breadcrumbs, search and notifications." }, { "name": "app-shell-02", "type": "registry:component", "registryDependencies": [ "button", "separator", "sidebar", "https://www.dashboardblocks.com/r/app-shell.json" ], "files": [ { "path": "registry/components/dashboardblocks/app-shell/app-shell-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/app-shell/app-shell-02.tsx" } ], "meta": { "shows": "An app shell whose sidebar collapses to icons with tooltips, with nested links and help and settings pinned to the bottom.", "size": "page", "usedWith": [ "app-shell-01" ], "component": "AppShell2", "props": "{ breadcrumbs: { href?: string; label: string }[]; children?: ReactNode; defaultCollapsed?: boolean; onCreate?: () => void; onSearch?: () => void; onSignOut?: () => void; pathname: string; secondarySections: { items: { badge?: ReactNode; href?: string; icon: ReactNode; items?: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; onSelect?: () => void; title: string }[]; label?: string }[]; sections: { items: { badge?: ReactNode; href?: string; icon: ReactNode; items?: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; onSelect?: () => void; title: string }[]; label?: string }[]; user: { avatar?: string; email: string; name: string }; userLinks: { href: string; icon: ReactNode; label: string }[] }" }, "description": "An app shell whose sidebar collapses to icons with tooltips, with nested links and help and settings pinned to the bottom." }, { "name": "app-shell-03", "type": "registry:component", "registryDependencies": [ "separator", "sidebar", "https://www.dashboardblocks.com/r/app-shell.json" ], "files": [ { "path": "registry/components/dashboardblocks/app-shell/app-shell-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/app-shell/app-shell-03.tsx" } ], "meta": { "shows": "An app shell with the page set in a card beside the sidebar, and plan usage with an upgrade link above the user menu.", "size": "page", "usedWith": [ "app-shell-01" ], "component": "AppShell3", "props": "{ breadcrumbs: { href?: string; label: string }[]; children?: ReactNode; notificationCount: number; onCreateWorkspace?: () => void; onNotificationsClick?: () => void; onSearch?: () => void; onSignOut?: () => void; pathname: string; sections: { items: { badge?: ReactNode; href?: string; icon: ReactNode; items?: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; onSelect?: () => void; title: string }[]; label?: string }[]; usage: { action?: { href: string; label: string }; limit: number; note?: ReactNode; unit?: string; title: string; used: number }; user: { avatar?: string; email: string; name: string }; userLinks: { href: string; icon: ReactNode; label: string }[]; workspaces: { id: string; logo: ReactNode; name: string; plan?: string }[] }" }, "description": "An app shell with the page set in a card beside the sidebar, and plan usage with an upgrade link above the user menu." }, { "name": "app-shell-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/app-shell.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/app-shell/app-shell-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/app-shell/app-shell-04.tsx" } ], "meta": { "shows": "An app shell with no sidebar: page links sit under the top bar and scroll sideways on small screens.", "size": "page", "usedWith": [ "app-shell-01" ], "component": "AppShell4", "props": "{ children?: ReactNode; description?: string; links: { badge?: ReactNode; href: string; icon?: ReactNode; title: string }[]; notificationCount: number; onNotificationsClick?: () => void; onSearch?: () => void; onSignOut?: () => void; pathname: string; title: string; user: { avatar?: string; email: string; name: string }; userLinks: { href: string; icon: ReactNode; label: string }[] }" }, "description": "An app shell with no sidebar: page links sit under the top bar and scroll sideways on small screens." }, { "name": "forms-01", "type": "registry:component", "registryDependencies": [ "field", "input", "https://www.dashboardblocks.com/r/option-select.json", "switch", "textarea", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-01.tsx" } ], "meta": { "shows": "A form with fields grouped into titled sections and a save bar that appears while there are unsaved changes.", "size": "half", "usedWith": [ "page-header-01", "forms-04" ], "component": "Forms1", "props": "{ defaultValues?: { bio: string; email: string; name: string; slug: string; timezone: string; weeklyDigest: boolean; workspaceName: string }; description: string; domain: string; onSubmit?: (values: { bio: string; email: string; name: string; slug: string; timezone: string; weeklyDigest: boolean; workspaceName: string }) => Promise; timezones: { label: string; value: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A form with fields grouped into titled sections and a save bar that appears while there are unsaved changes." }, { "name": "forms-02", "type": "registry:component", "registryDependencies": [ "button", "field", "input", "https://www.dashboardblocks.com/r/option-select.json", "textarea", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-02.tsx" } ], "meta": { "shows": "A create form in a panel that slides in from the side, with errors from the server shown on the field.", "size": "half", "usedWith": [ "data-table-02", "page-header-04" ], "component": "Forms2", "props": "{ customers?: { email: string; name: string; plan: string }[]; onCreate?: (values: { company: string; email: string; name: string; notes: string; plan: string }) => Promise; plans: string[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A create form in a panel that slides in from the side, with errors from the server shown on the field." }, { "name": "forms-03", "type": "registry:component", "registryDependencies": [ "button", "field", "input", "https://www.dashboardblocks.com/r/option-select.json", "switch", "textarea", "https://www.dashboardblocks.com/r/forms.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-03.tsx" } ], "meta": { "shows": "A form in steps that checks each step before moving on and reviews everything on the last one.", "size": "half", "usedWith": [ "onboarding-01", "checklist-02" ], "component": "Forms3", "props": "{ environments: { label: string; value: string }[]; onCreate?: (values: { description: string; environment: string; isPublic: boolean; name: string; region: string }) => Promise; regions: { label: string; value: string }[]; title: string }" }, "description": "A form in steps that checks each step before moving on and reviews everything on the last one." }, { "name": "forms-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-04.tsx" } ], "meta": { "shows": "Single values edited in place, saved with Enter and cancelled with Escape.", "size": "half", "usedWith": [ "record-detail-01", "forms-01" ], "component": "Forms4", "props": "{ defaultValues?: { company: string; email: string; name: string; phone: string; website: string }; onSave?: (field: \"name\" | \"email\" | \"company\" | \"phone\" | \"website\", value: string) => Promise; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Single values edited in place, saved with Enter and cancelled with Escape." }, { "name": "forms-05", "type": "registry:component", "registryDependencies": [ "field", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/country-flag.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/multi-select.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-05.tsx" } ], "meta": { "shows": "Several values picked from a searchable list and shown as removable chips, with a limit checked on save.", "size": "half", "usedWith": [ "forms-01", "settings-01" ], "component": "Forms5", "props": "{ countries: { code: string; name: string }[]; defaultValues?: { markets: string[]; metrics: string[]; recipients: string[] }; description: string; maxMetrics?: number; metrics: { disabled?: boolean; icon?: ReactNode; label: string; value: string }[]; onSubmit?: (values: { markets: string[]; metrics: string[]; recipients: string[] }) => Promise; people: { disabled?: boolean; icon?: ReactNode; label: string; value: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Several values picked from a searchable list and shown as removable chips, with a limit checked on save." }, { "name": "forms-06", "type": "registry:component", "registryDependencies": [ "field", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/choice-cards.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/tag.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-06.tsx" } ], "meta": { "shows": "One option and several options picked from cards, each with its price and a line of detail, saved together.", "size": "half", "usedWith": [ "forms-05", "settings-01" ], "component": "Forms6", "props": "{ addOns: { description: string; disabled?: boolean; id: string; name: string; per: \"month\" | \"seat\"; price: number }[]; defaultValues?: { addOns: string[]; period: \"month\" | \"year\" }; description: string; onSubmit?: (values: { addOns: string[]; period: \"month\" | \"year\" }) => Promise; seatPrice: { month: number; year: number }; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "One option and several options picked from cards, each with its price and a line of detail, saved together." }, { "name": "forms-07", "type": "registry:component", "registryDependencies": [ "field", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/number-field.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-07.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-07.tsx" } ], "meta": { "shows": "Numbers with their unit or currency, formatted when you leave the field, with minus and plus for a count of seats.", "size": "half", "usedWith": [ "forms-06", "settings-01" ], "component": "Forms7", "props": "{ defaultValues?: { alertAt: null | number; cap: null | number; seats: null | number }; description: string; members: number; onSubmit?: (values: { alertAt: null | number; cap: null | number; seats: null | number }) => Promise; seatPrice: number; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Numbers with their unit or currency, formatted when you leave the field, with minus and plus for a count of seats." }, { "name": "forms-08", "type": "registry:component", "registryDependencies": [ "field", "input", "https://www.dashboardblocks.com/r/address-fields.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/forms.json" ], "files": [ { "path": "registry/components/dashboardblocks/forms/forms-08.tsx", "type": "registry:component", "target": "@components/dashboardblocks/forms/forms-08.tsx" } ], "meta": { "shows": "A billing address whose fields follow the country: a state and ZIP code in the US, a postcode in the UK, the postal code before the city in Germany.", "size": "half", "usedWith": [ "forms-07", "billing-05" ], "component": "Forms8", "props": "{ defaultValues?: BillingAddress; description: string; onSubmit?: (values: BillingAddress) => Promise; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A billing address whose fields follow the country: a state and ZIP code in the US, a postcode in the UK, the postal code before the city in Germany." }, { "name": "record-detail-01", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/record-detail.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/record-detail/record-detail-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/record-detail/record-detail-01.tsx" } ], "meta": { "shows": "A customer page with headline numbers, recent orders, contact details and notes.", "size": "full", "usedWith": [ "page-header-03", "data-table-02", "comments-01" ], "component": "RecordDetail1", "props": "{ customer?: { avatar?: string; email: string; location: string; name: string; notes: string; phone: string; since: string; status: \"Active\" | \"At risk\" | \"Churned\"; tags: string[] }; onDelete?: () => void; onEdit?: () => void; onMerge?: () => void; orders?: { date: string; href: string; id: string; status: \"Refunded\" | \"Delivered\" | \"Shipped\"; total: number }[]; stats?: { detail?: ReactNode; label: string; value: ReactNode }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A customer page with headline numbers, recent orders, contact details and notes." }, { "name": "record-detail-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/record-detail.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/table.json" ], "files": [ { "path": "registry/components/dashboardblocks/record-detail/record-detail-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/record-detail/record-detail-02.tsx" } ], "meta": { "shows": "An order page with line items and totals, a timeline of what happened, the customer, and shipping and payment.", "size": "full", "usedWith": [ "page-header-03", "invoice-01", "timeline-01" ], "component": "RecordDetail2", "props": "{ customer?: { email: string; href: string; name: string; orders: number }; events?: { at: Date; icon: ReactNode; text: string; tone: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" | \"accent\" }[]; items?: { name: string; price: number; quantity: number; sku: string }[]; now: Date; onCancel?: () => void; onPrint?: () => void; onRefund?: () => void; order?: { fulfilment: \"Delivered\" | \"Shipped\" | \"Unfulfilled\"; id: string; payment: string; placed: string; shipping: number; shippingAddress: string[]; status: \"Paid\" | \"Pending\" | \"Refunded\"; taxRate: number }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "An order page with line items and totals, a timeline of what happened, the customer, and shipping and payment." }, { "name": "record-detail-03", "type": "registry:component", "registryDependencies": [ "button", "textarea", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/record-detail.json", "https://www.dashboardblocks.com/r/status-label.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/record-detail/record-detail-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/record-detail/record-detail-03.tsx" } ], "meta": { "shows": "A ticket page with a description, activity and comments, a comment box, and properties such as priority, assignee and labels.", "size": "full", "usedWith": [ "page-header-03", "comments-01", "activity-feed-02" ], "component": "RecordDetail3", "props": "{ currentUser: { avatar?: string; name: string }; events?: { at: Date; author: { avatar?: string; name: string }; id: string; comment?: string; text: string }[]; now: Date; onAssignToMe?: () => void; onClose?: () => void; onComment?: (text: string) => Promise; ticket?: { assignee: { avatar?: string; name: string }; created: string; description: string[]; id: string; labels: string[]; linkedOrder: { href: string; label: string }; priority: \"Low\" | \"Medium\" | \"High\" | \"Urgent\"; reporter: { avatar?: string; name: string }; status: \"Open\" | \"In progress\" | \"Done\"; title: string }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A ticket page with a description, activity and comments, a comment box, and properties such as priority, assignee and labels." }, { "name": "page-header-01", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/page-header.json" ], "files": [ { "path": "registry/components/dashboardblocks/page-header/page-header-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/page-header/page-header-01.tsx" } ], "meta": { "shows": "A page title and description with a secondary action and a main action.", "size": "full", "usedWith": [ "data-table-02", "forms-01" ], "component": "PageHeader1", "props": "{ createLabel?: null | string; description?: string; exportLabel?: null | string; onCreate?: () => void; onExport?: () => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A page title and description with a secondary action and a main action." }, { "name": "page-header-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/page-header/page-header-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/page-header/page-header-02.tsx" } ], "meta": { "shows": "A page title with its status as a coloured word and links to the page's sections, each with a count.", "size": "full", "usedWith": [ "data-table-02", "record-detail-01" ], "component": "PageHeader2", "props": "{ description?: string; onInvite?: () => void; pathname: string; projectStatus?: \"draft\" | \"paused\" | \"live\"; tabs: { badge?: ReactNode; href: string; icon?: ReactNode; id?: string; indicator?: ReactNode; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A page title with its status as a coloured word and links to the page's sections, each with a count." }, { "name": "page-header-03", "type": "registry:component", "registryDependencies": [ "avatar", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/page-header.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/page-header/page-header-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/page-header/page-header-03.tsx" } ], "meta": { "shows": "A record header with a back link, a photo, the record's key numbers in a row and a menu for less common actions such as delete.", "size": "full", "usedWith": [ "record-detail-01", "record-detail-02", "record-detail-03" ], "component": "PageHeader3", "props": "{ back: { href: string; label: string }; customer?: { avatar?: string; email: string; initials: string; lastOrder: { id: string; total: number; when: string }; location: string; name: string; orders: number; since: string; spent: number; status: \"active\" | \"churned\" | \"at-risk\" }; onArchive?: () => void; onDelete?: () => void; onDuplicate?: () => void; onEdit?: () => void; onMessage?: () => void; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A record header with a back link, a photo, the record's key numbers in a row and a menu for less common actions such as delete." }, { "name": "page-header-04", "type": "registry:component", "registryDependencies": [ "button", "input-group", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/page-header.json" ], "files": [ { "path": "registry/components/dashboardblocks/page-header/page-header-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/page-header/page-header-04.tsx" } ], "meta": { "shows": "A page title with its count beside it, and search and the main action on the same row.", "size": "full", "usedWith": [ "data-table-02", "forms-02" ], "component": "PageHeader4", "props": "{ count?: number; description?: string; onCreate?: () => void; onSearch?: (query: string) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A page title with its count beside it, and search and the main action on the same row." }, { "name": "notifications-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/notifications.json" ], "files": [ { "path": "registry/components/dashboardblocks/notifications/notifications-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/notifications/notifications-01.tsx" } ], "meta": { "shows": "A bell menu listing the latest notifications, with a mark all as read action and a link to the inbox.", "size": "half", "usedWith": [ "notifications-03", "app-shell-01" ], "component": "Notifications1", "props": "{ notifications?: { at: Date; body?: string; href?: string; icon: ReactNode; id: string; read: boolean; title: ReactNode; tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" | \"accent\" }[]; now: Date; title: string; viewAllHref: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A bell menu listing the latest notifications, with a mark all as read action and a link to the inbox." }, { "name": "notifications-02", "type": "registry:component", "registryDependencies": [ "card", "button", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/notifications.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/notifications/notifications-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/notifications/notifications-02.tsx" } ], "meta": { "shows": "Notifications that ask for a decision, such as a request to join or a refund, with a tab for the ones still waiting.", "size": "half", "usedWith": [ "notifications-03", "activity-feed-01" ], "component": "Notifications2", "props": "{ notifications?: { request?: { approve: string; decline: string }; at: Date; body?: string; href?: string; icon: ReactNode; id: string; read: boolean; title: ReactNode; tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" | \"accent\" }[]; now: Date; onDecide?: (id: string, decision: \"approved\" | \"declined\") => Promise; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Notifications that ask for a decision, such as a request to join or a refund, with a tab for the ones still waiting." }, { "name": "notifications-03", "type": "registry:component", "registryDependencies": [ "button", "tabs", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/notifications.json" ], "files": [ { "path": "registry/components/dashboardblocks/notifications/notifications-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/notifications/notifications-03.tsx" } ], "meta": { "shows": "Every notification grouped by day, filtered by unread and mentions, each markable as read or unread or archived.", "size": "full", "usedWith": [ "notifications-01", "notifications-02" ], "component": "Notifications3", "props": "{ notifications?: { mention?: boolean; at: Date; body?: string; href?: string; icon: ReactNode; id: string; read: boolean; title: ReactNode; tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" | \"accent\" }[]; now: Date; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Every notification grouped by day, filtered by unread and mentions, each markable as read or unread or archived." }, { "name": "command-menu-01", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/command-menu.json" ], "files": [ { "path": "registry/components/dashboardblocks/command-menu/command-menu-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/command-menu/command-menu-01.tsx" } ], "meta": { "shows": "A command palette to jump to a page or run an action, with shortcuts shown beside each action.", "size": "half", "usedWith": [ "app-shell-01", "command-menu-02" ], "component": "CommandMenu1", "props": "{ shortcutKey?: string; onAction?: (id: string) => void; onNavigate?: (href: string) => void }" }, "description": "A command palette to jump to a page or run an action, with shortcuts shown beside each action." }, { "name": "command-menu-02", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/command-menu.json" ], "files": [ { "path": "registry/components/dashboardblocks/command-menu/command-menu-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/command-menu/command-menu-02.tsx" } ], "meta": { "shows": "A command palette that shows recent records, then searches customers and orders as you type.", "size": "half", "usedWith": [ "command-menu-01", "data-table-02" ], "component": "CommandMenu2", "props": "{ recent: { heading: string; items: { description?: string; href?: string; icon?: ReactNode; id: string; keywords?: string[]; keepOpen?: boolean; label: string; meta?: string; onSelect?: () => void; shortcut?: string }[] }; search?: (query: string) => Promise<{ heading: string; items: { description?: string; href?: string; icon?: ReactNode; id: string; keywords?: string[]; keepOpen?: boolean; label: string; meta?: string; onSelect?: () => void; shortcut?: string }[] }[]>; onNavigate?: (href: string) => void }" }, "description": "A command palette that shows recent records, then searches customers and orders as you type." }, { "name": "kanban-01", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kanban.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/kanban/kanban-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kanban/kanban-01.tsx" } ], "meta": { "shows": "A sprint board of issues in columns with labels, assignees, due dates and priorities, and warnings when a column passes its limit.", "size": "full", "usedWith": [ "comments-04", "calendar-01" ], "component": "Kanban1", "props": "{ columns: { color?: string; icon?: ReactNode; id: string; title: string; wipLimit?: number }[]; doneColumn: string; issues?: { assignees: string[]; attachments?: number; comments?: number; due?: Date; key: string; labels: { name: string; tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\" | \"accent\" }[]; priority: \"low\" | \"high\" | \"medium\" | \"urgent\"; subtasks?: { done: number; total: number }; column: string; id: string; title: string }[]; now: Date; onMove?: (id: string, column: string, index: number) => void; period: string; project: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A sprint board of issues in columns with labels, assignees, due dates and priorities, and warnings when a column passes its limit." }, { "name": "kanban-02", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kanban.json", "https://www.dashboardblocks.com/r/pipeline.json" ], "files": [ { "path": "registry/components/dashboardblocks/kanban/kanban-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kanban/kanban-02.tsx" } ], "meta": { "shows": "A sales board of deals in columns, each column showing its total value and each deal its next step.", "size": "full", "usedWith": [ "pipeline-01", "funnel-01" ], "component": "Kanban2", "props": "{ closedColumns: { lost: string; won: string }; columns: { color?: string; icon?: ReactNode; id: string; title: string; wipLimit?: number }[]; deals?: { description: string; nextStep: string; nextStepAt: Date; owner: string; value: number; column: string; id: string; title: string }[]; now: Date; onMove?: (id: string, column: string, index: number) => void; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A sales board of deals in columns, each column showing its total value and each deal its next step." }, { "name": "kanban-03", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/kanban.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/kanban/kanban-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/kanban/kanban-03.tsx" } ], "meta": { "shows": "A support queue of tickets with priority and time left to their SLA, where a full column refuses more tickets.", "size": "full", "usedWith": [ "comments-04", "status-01" ], "component": "Kanban3", "props": "{ columns: { color?: string; icon?: ReactNode; id: string; title: string; wipLimit?: number }[]; now: Date; onAdd?: (ticket: { assignee?: string; channel: \"email\" | \"chat\"; customer?: string; number: number; priority: \"low\" | \"high\" | \"medium\" | \"urgent\"; slaDueAt: Date; column: string; id: string; title: string }) => Promise; onMove?: (id: string, column: string, index: number) => void; pausedColumns: string[]; slaHours: number; tickets?: { assignee?: string; channel: \"email\" | \"chat\"; customer?: string; number: number; priority: \"low\" | \"high\" | \"medium\" | \"urgent\"; slaDueAt: Date; column: string; id: string; title: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A support queue of tickets with priority and time left to their SLA, where a full column refuses more tickets." }, { "name": "comments-01", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/comments.json" ], "files": [ { "path": "registry/components/dashboardblocks/comments/comments-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comments/comments-01.tsx" } ], "meta": { "shows": "Discussion threads with replies, reactions and resolved threads, and a box to start a new one.", "size": "half", "usedWith": [ "comments-02", "activity-feed-01" ], "component": "Comments1", "props": "{ comments?: { at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: ThreadComment[]; resolved?: boolean }[]; currentUser: { avatar?: string; name: string }; now: Date; onDelete?: (commentId: string) => void; onEdit?: (commentId: string, body: string) => Promise; onReact?: (commentId: string, emoji: string) => void; onResolve?: (commentId: string, resolved: boolean) => void; onSubmit?: (body: string, options: { parentId?: string }) => Promise; people: { avatar?: string; name: string }[]; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Discussion threads with replies, reactions and resolved threads, and a box to start a new one." }, { "name": "comments-02", "type": "registry:component", "registryDependencies": [ "card", "button", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/comments.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/comments/comments-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comments/comments-02.tsx" } ], "meta": { "shows": "A composer that previews how mentions will look and who will be notified, above the latest updates.", "size": "half", "usedWith": [ "comments-01", "team-01" ], "component": "Comments2", "props": "{ currentUser: { avatar?: string; name: string }; now: Date; onReact?: (updateId: string, emoji: string) => void; onSubmit?: (body: string, options: { mentions: string[] }) => Promise; people: { avatar?: string; name: string }[]; project: string; title: string; updates?: { at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: ThreadComment[]; resolved?: boolean }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A composer that previews how mentions will look and who will be notified, above the latest updates." }, { "name": "comments-03", "type": "registry:component", "registryDependencies": [ "card", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/comments.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/tag.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/comments/comments-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comments/comments-03.tsx" } ], "meta": { "shows": "Comments in a column beside a document, each quoting the words it is about, that move to Resolved when closed.", "size": "full", "usedWith": [ "comments-01", "activity-feed-01" ], "component": "Comments3", "props": "{ comments?: { quote: string; at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: { at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: ThreadComment[]; resolved?: boolean }[]; resolved?: boolean }[]; currentUser: { avatar?: string; name: string }; document: { paragraphs: string[]; status: string; statusTone?: \"success\" | \"warning\" | \"info\" | \"neutral\"; title: string; updated: string }; now: Date; onReact?: (commentId: string, emoji: string) => void; onResolve?: (commentId: string, resolved: boolean) => void; onSubmit?: (body: string, options: { parentId: string }) => Promise; people: { avatar?: string; name: string }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Comments in a column beside a document, each quoting the words it is about, that move to Resolved when closed." }, { "name": "comments-04", "type": "registry:component", "registryDependencies": [ "card", "tabs", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/comments.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/comments/comments-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/comments/comments-04.tsx" } ], "meta": { "shows": "A support ticket conversation with replies emailed to the customer and internal notes only the team sees.", "size": "half", "usedWith": [ "record-detail-01", "kanban-03" ], "component": "Comments4", "props": "{ currentUser: { avatar?: string; name: string }; customer: { company: string; email: string; name: string }; messages?: { kind: \"customer\" | \"reply\" | \"note\"; at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: { at: Date; author: { avatar?: string; name: string }; body: string; edited?: boolean; id: string; reactions?: { count: number; emoji: string; reacted: boolean }[]; replies?: ThreadComment[]; resolved?: boolean }[]; resolved?: boolean }[]; now: Date; onReact?: (messageId: string, emoji: string) => void; onSubmit?: (body: string, options: { internal: boolean }) => Promise; people: { avatar?: string; name: string }[]; ticketId: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A support ticket conversation with replies emailed to the customer and internal notes only the team sees." }, { "name": "calendar-01", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/calendar.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/calendar/calendar-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/calendar/calendar-01.tsx" } ], "meta": { "shows": "A month grid of team events, launches, travel and holidays, with the selected day listed beside it.", "size": "full", "usedWith": [ "calendar-02", "schedule-01" ], "component": "Calendar1", "props": "{ calendars: { color: string; name: string }[]; events?: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; onSelectDay?: (day: Date) => void; onSelectEvent?: (event: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }) => void; timeZone?: string; weekStartsOn?: 0 | 1; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A month grid of team events, launches, travel and holidays, with the selected day listed beside it." }, { "name": "calendar-02", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/calendar.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/calendar/calendar-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/calendar/calendar-02.tsx" } ], "meta": { "shows": "A week on an hour axis that opens at working hours, with all-day events on top and the selected event's details.", "size": "full", "usedWith": [ "calendar-01", "calendar-04" ], "component": "Calendar2", "props": "{ calendars: { color: string; name: string }[]; events?: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; onSelectEvent?: (event: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }) => void; timeZone?: string; weekStartsOn?: 0 | 1; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A week on an hour axis that opens at working hours, with all-day events on top and the selected event's details." }, { "name": "calendar-03", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/calendar.json", "https://www.dashboardblocks.com/r/schedule.json" ], "files": [ { "path": "registry/components/dashboardblocks/calendar/calendar-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/calendar/calendar-03.tsx" } ], "meta": { "shows": "A content calendar that switches between month and week, with each calendar toggled from a sidebar.", "size": "full", "usedWith": [ "calendar-01", "kanban-01" ], "component": "Calendar3", "props": "{ calendars: { color: string; name: string }[]; events?: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; now: Date; onSelectEvent?: (event: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }) => void; timeZone?: string; view?: \"month\" | \"week\"; weekStartsOn?: 0 | 1; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A content calendar that switches between month and week, with each calendar toggled from a sidebar." }, { "name": "calendar-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/calendar.json", "https://www.dashboardblocks.com/r/schedule.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/calendar/calendar-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/calendar/calendar-04.tsx" } ], "meta": { "shows": "A day of meeting room bookings with a column per room and whether each is free right now.", "size": "full", "usedWith": [ "calendar-02", "schedule-01" ], "component": "Calendar4", "props": "{ bookings?: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }[]; endHour?: number; now: Date; onSelectBooking?: (booking: { attendees?: { avatar?: string; name: string }[]; description?: string; resource?: string; allDay?: boolean; calendar?: string; color?: string; end?: Date; id: string; location?: string; start: Date; title: string }) => void; rooms: { id: string; name: string; seats: number }[]; startHour?: number; teams: { color: string; name: string }[]; timeZone?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A day of meeting room bookings with a column per room and whether each is free right now." }, { "name": "files-01", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/files.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/files/files-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/files/files-01.tsx" } ], "meta": { "shows": "A dropzone showing the accepted types and size limit, with each upload's progress and cancel, retry and remove actions.", "size": "half", "usedWith": [ "files-02", "files-03" ], "component": "Files1", "props": "{ accept: string; acceptHint: string; description: string; initialUploads?: { error?: string; file?: File; id: string; name: string; progress: number; rejected?: boolean; size: number; status: \"error\" | \"done\" | \"queued\" | \"canceled\" | \"uploading\"; type: string; url?: string }[]; maxFiles: number; maxSize: number; title: string; upload: (file: File, options: { onProgress: (progress: number) => void; signal: AbortSignal }) => Promise }" }, "description": "A dropzone showing the accepted types and size limit, with each upload's progress and cancel, retry and remove actions." }, { "name": "files-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/data-table.json", "https://www.dashboardblocks.com/r/files.json", "https://www.dashboardblocks.com/r/table.json", "https://www.dashboardblocks.com/r/team.json" ], "files": [ { "path": "registry/components/dashboardblocks/files/files-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/files/files-02.tsx" } ], "meta": { "shows": "A table of files with type, owner, last change and size, with search, type filter, sorting and bulk download or delete.", "size": "full", "usedWith": [ "files-01", "files-03" ], "component": "Files2", "props": "{ description?: string; files?: { href: string; id: string; modified: Date; name: string; owner: string; ownerAvatar?: string; size: number }[]; now: Date; onCopyLink?: (file: { href: string; id: string; modified: Date; name: string; owner: string; ownerAvatar?: string; size: number }) => Promise; onDelete?: (files: { href: string; id: string; modified: Date; name: string; owner: string; ownerAvatar?: string; size: number }[]) => Promise; onDownload?: (files: { href: string; id: string; modified: Date; name: string; owner: string; ownerAvatar?: string; size: number }[]) => void; timeZone?: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A table of files with type, owner, last change and size, with search, type filter, sorting and bulk download or delete." }, { "name": "files-03", "type": "registry:component", "registryDependencies": [ "card", "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/files.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/progress-bar.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/files/files-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/files/files-03.tsx" } ], "meta": { "shows": "Storage used against the plan, split by kind of file, with the largest files and the space deleting them would free.", "size": "half", "usedWith": [ "files-02", "usage-meter-01" ], "component": "Files3", "props": "{ breakdown?: { kind: \"archive\" | \"audio\" | \"code\" | \"document\" | \"folder\" | \"image\" | \"other\" | \"pdf\" | \"presentation\" | \"spreadsheet\" | \"video\"; label?: string; size: number }[]; largestFiles?: { href: string; id: string; kind: \"archive\" | \"audio\" | \"code\" | \"document\" | \"folder\" | \"image\" | \"other\" | \"pdf\" | \"presentation\" | \"spreadsheet\" | \"video\"; location: string; name: string; size: number }[]; limit: number; onDelete?: (file: { href: string; id: string; kind: \"archive\" | \"audio\" | \"code\" | \"document\" | \"folder\" | \"image\" | \"other\" | \"pdf\" | \"presentation\" | \"spreadsheet\" | \"video\"; location: string; name: string; size: number }) => Promise; plan: string; title: string; upgradeHint: string; upgradeHref: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Storage used against the plan, split by kind of file, with the largest files and the space deleting them would free." }, { "name": "files-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/activity-feed.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/files.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/files/files-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/files/files-04.tsx" } ], "meta": { "shows": "Folders as tiles over a list of files with their size and last change, a path back to the top, and a menu on each file.", "size": "full", "usedWith": [ "files-01", "files-02" ], "component": "Files4", "props": "{ onCopyLink?: (file: { href: string; id: string; modified: Date; name: string; size: number; type: \"file\" }) => Promise; onDelete?: (file: { href: string; id: string; modified: Date; name: string; size: number; type: \"file\" }) => Promise; now: Date; root: { children: ({ href: string; id: string; modified: Date; name: string; size: number; type: \"file\" } | BrowserFolder)[]; id: string; name: string; type: \"folder\" }; timeZone?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Folders as tiles over a list of files with their size and last change, a path back to the top, and a menu on each file." }, { "name": "ai-assistant-01", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/ai-assistant.json", "https://www.dashboardblocks.com/r/ai-chat.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/stat-group.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-assistant/ai-assistant-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-assistant/ai-assistant-01.tsx" } ], "meta": { "shows": "An assistant docked beside the page with suggested prompts, the page as context, and New conversation and Close buttons.", "size": "page", "usedWith": [ "ai-assistant-02" ], "component": "AiAssistant1", "props": "{ accounts?: { mrr: number; name: string; plan: string }[]; chat: { addToolApprovalResponse?: (response: { approved: boolean; id: string; reason?: string }) => unknown; error?: Error; messages: { id: string; metadata?: unknown; parts: ({ citations?: { endIndex?: number; source: { id: string; sourceType: \"url\"; title?: string; url: string } | { id: string; sourceType: \"document\"; title: string } }[]; state?: \"done\" | \"streaming\"; text: string; type: \"text\" } | { state?: \"done\" | \"streaming\"; text: string; type: \"reasoning\" } | { type: `tool-${string}`; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { toolName: string; type: \"dynamic-tool\"; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { sourceId: string; title?: string; type: \"source-url\"; url: string } | { filename?: string; mediaType: string; sourceId: string; title: string; type: \"source-document\" } | { filename?: string; mediaType: string; type: \"file\"; url: string } | { data: unknown; id?: string; type: `data-${string}` } | { type: \"step-start\" | \"custom\" | \"reasoning-file\" | \"steering-message\" })[]; role: \"system\" | \"user\" | \"assistant\" }[]; regenerate: (options: { messageId?: string }) => unknown; selectVersion?: (messageId: string, index: number) => unknown; sendMessage: (message: { files?: { filename?: string; mediaType: string; type: \"file\"; url: string }[]; messageId?: string; metadata?: unknown; text: string }) => unknown; setMessages?: (messages: []) => void; status: \"error\" | \"streaming\" | \"ready\" | \"submitted\"; stop: () => unknown; versions?: { } }; comparison: string; context: string; defaultOpen?: boolean; description: string; historyLabels: string[]; metrics?: { history: number[]; changeType?: \"percent\" | \"points\"; detail?: ReactNode; formatter?: (value: number) => string; goodDirection?: \"up\" | \"down\"; key: string; label: string; previous?: number; tone?: \"warning\"; value: number }[]; suggestions: { icon?: ReactNode; label: string; prompt?: string }[]; title: string; toolLabels?: Record; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "An assistant docked beside the page with suggested prompts, the page as context, and New conversation and Close buttons." }, { "name": "ai-assistant-02", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-assistant.json", "https://www.dashboardblocks.com/r/ai-chat.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-assistant/ai-assistant-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-assistant/ai-assistant-02.tsx" } ], "meta": { "shows": "A chat with an assistant whose replies include a table and a SQL query, with attachments, copy, rating, regenerate and follow-up questions.", "size": "half", "usedWith": [ "ai-assistant-01", "ai-assistant-04" ], "component": "AiAssistant2", "props": "{ chat: { addToolApprovalResponse?: (response: { approved: boolean; id: string; reason?: string }) => unknown; error?: Error; messages: { id: string; metadata?: unknown; parts: ({ citations?: { endIndex?: number; source: { id: string; sourceType: \"url\"; title?: string; url: string } | { id: string; sourceType: \"document\"; title: string } }[]; state?: \"done\" | \"streaming\"; text: string; type: \"text\" } | { state?: \"done\" | \"streaming\"; text: string; type: \"reasoning\" } | { type: `tool-${string}`; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { toolName: string; type: \"dynamic-tool\"; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { sourceId: string; title?: string; type: \"source-url\"; url: string } | { filename?: string; mediaType: string; sourceId: string; title: string; type: \"source-document\" } | { filename?: string; mediaType: string; type: \"file\"; url: string } | { data: unknown; id?: string; type: `data-${string}` } | { type: \"step-start\" | \"custom\" | \"reasoning-file\" | \"steering-message\" })[]; role: \"system\" | \"user\" | \"assistant\" }[]; regenerate: (options: { messageId?: string }) => unknown; selectVersion?: (messageId: string, index: number) => unknown; sendMessage: (message: { files?: { filename?: string; mediaType: string; type: \"file\"; url: string }[]; messageId?: string; metadata?: unknown; text: string }) => unknown; setMessages?: (messages: []) => void; status: \"error\" | \"streaming\" | \"ready\" | \"submitted\"; stop: () => unknown; versions?: { } }; description: string; followUps: { icon?: ReactNode; label: string; prompt?: string }[]; onFeedback?: (messageId: string, feedback: null | \"up\" | \"down\") => void; title: string; toolLabels?: Record; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A chat with an assistant whose replies include a table and a SQL query, with attachments, copy, rating, regenerate and follow-up questions." }, { "name": "ai-assistant-03", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-assistant.json", "https://www.dashboardblocks.com/r/ai-chat.json", "https://www.dashboardblocks.com/r/ai-usage.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/format.json", "https://www.dashboardblocks.com/r/kpi.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-assistant/ai-assistant-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-assistant/ai-assistant-03.tsx" } ], "meta": { "shows": "Questions about token usage numbers, with the tokens and cost shown for each answer and a change that waits for approval.", "size": "half", "usedWith": [ "ai-usage-01", "ai-assistant-02" ], "component": "AiAssistant3", "props": "{ chat: { addToolApprovalResponse?: (response: { approved: boolean; id: string; reason?: string }) => unknown; error?: Error; messages: { id: string; metadata?: unknown; parts: ({ citations?: { endIndex?: number; source: { id: string; sourceType: \"url\"; title?: string; url: string } | { id: string; sourceType: \"document\"; title: string } }[]; state?: \"done\" | \"streaming\"; text: string; type: \"text\" } | { state?: \"done\" | \"streaming\"; text: string; type: \"reasoning\" } | { type: `tool-${string}`; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { toolName: string; type: \"dynamic-tool\"; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { sourceId: string; title?: string; type: \"source-url\"; url: string } | { filename?: string; mediaType: string; sourceId: string; title: string; type: \"source-document\" } | { filename?: string; mediaType: string; type: \"file\"; url: string } | { data: unknown; id?: string; type: `data-${string}` } | { type: \"step-start\" | \"custom\" | \"reasoning-file\" | \"steering-message\" })[]; role: \"system\" | \"user\" | \"assistant\" }[]; regenerate: (options: { messageId?: string }) => unknown; selectVersion?: (messageId: string, index: number) => unknown; sendMessage: (message: { files?: { filename?: string; mediaType: string; type: \"file\"; url: string }[]; messageId?: string; metadata?: unknown; text: string }) => unknown; setMessages?: (messages: []) => void; status: \"error\" | \"streaming\" | \"ready\" | \"submitted\"; stop: () => unknown; versions?: { } }; description: string; prices: { cached?: number; input: number; output: number }; suggestions: { icon?: ReactNode; label: string; prompt?: string }[]; title: string; toolLabels?: Record; tokens?: { cached?: number; input: number; output: number }; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "Questions about token usage numbers, with the tokens and cost shown for each answer and a change that waits for approval." }, { "name": "ai-assistant-04", "type": "registry:component", "registryDependencies": [ "card", "https://www.dashboardblocks.com/r/ai-assistant.json", "https://www.dashboardblocks.com/r/ai-chat.json", "https://www.dashboardblocks.com/r/block-state.json" ], "files": [ { "path": "registry/components/dashboardblocks/ai-assistant/ai-assistant-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/ai-assistant/ai-assistant-04.tsx" } ], "meta": { "shows": "A failed assistant reply kept in the conversation with a button to try again.", "size": "half", "usedWith": [ "ai-assistant-02", "states-01" ], "component": "AiAssistant4", "props": "{ chat: { addToolApprovalResponse?: (response: { approved: boolean; id: string; reason?: string }) => unknown; error?: Error; messages: { id: string; metadata?: unknown; parts: ({ citations?: { endIndex?: number; source: { id: string; sourceType: \"url\"; title?: string; url: string } | { id: string; sourceType: \"document\"; title: string } }[]; state?: \"done\" | \"streaming\"; text: string; type: \"text\" } | { state?: \"done\" | \"streaming\"; text: string; type: \"reasoning\" } | { type: `tool-${string}`; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { toolName: string; type: \"dynamic-tool\"; approval?: { approved?: boolean; id: string; isAutomatic?: boolean; reason?: string; requestReason?: string }; errorText?: string; input?: unknown; output?: unknown; preliminary?: boolean; state: \"input-streaming\" | \"input-available\" | \"approval-requested\" | \"approval-responded\" | \"output-available\" | \"output-error\" | \"output-denied\"; title?: string; toolCallId: string } | { sourceId: string; title?: string; type: \"source-url\"; url: string } | { filename?: string; mediaType: string; sourceId: string; title: string; type: \"source-document\" } | { filename?: string; mediaType: string; type: \"file\"; url: string } | { data: unknown; id?: string; type: `data-${string}` } | { type: \"step-start\" | \"custom\" | \"reasoning-file\" | \"steering-message\" })[]; role: \"system\" | \"user\" | \"assistant\" }[]; regenerate: (options: { messageId?: string }) => unknown; selectVersion?: (messageId: string, index: number) => unknown; sendMessage: (message: { files?: { filename?: string; mediaType: string; type: \"file\"; url: string }[]; messageId?: string; metadata?: unknown; text: string }) => unknown; setMessages?: (messages: []) => void; status: \"error\" | \"streaming\" | \"ready\" | \"submitted\"; stop: () => unknown; versions?: { } }; description: string; title: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A failed assistant reply kept in the conversation with a button to try again." }, { "name": "invoice-01", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/invoice.json", "https://www.dashboardblocks.com/r/record-detail.json" ], "files": [ { "path": "registry/components/dashboardblocks/invoice/invoice-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/invoice/invoice-01.tsx" } ], "meta": { "shows": "An overdue invoice with discount, sales tax, deposit and balance due, payment instructions and a reminder to send.", "size": "full", "usedWith": [ "billing-01", "invoice-02" ], "component": "Invoice1", "props": "{ bank: { accountName: string; accountNumber: string; bank: string; routing: string }; billTo: { label: string; lines: string[]; name: string }; brand: { name: string; website: string }; currency?: string; discountRate?: number; dueDate: Date; footer: string[]; from: { label: string; lines: string[]; name: string }; issueDate: Date; lines?: { detail?: string; description: string; id: string; optional?: boolean; quantity: number; sku?: string; taxRate?: number; unit?: string; unitPrice: number }[]; notes: string; now: Date; number: string; onDownload?: () => void; onSendReminder?: () => Promise; paid?: number; payUrl: string; poNumber?: string; sentTo: string; taxRate?: number; terms: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "An overdue invoice with discount, sales tax, deposit and balance due, payment instructions and a reminder to send." }, { "name": "invoice-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json", "https://www.dashboardblocks.com/r/invoice.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/invoice/invoice-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/invoice/invoice-02.tsx" } ], "meta": { "shows": "A paid receipt with the payment method, a partial refund and the net amount paid.", "size": "full", "usedWith": [ "invoice-01", "billing-02" ], "component": "Invoice2", "props": "{ brand: { name: string; website: string }; currency?: string; email: string; footer: string[]; lines?: { detail?: string; description: string; id: string; optional?: boolean; quantity: number; sku?: string; taxRate?: number; unit?: string; unitPrice: number }[]; number: string; onDownload?: () => void; onEmail?: () => Promise; orderNumber: string; paidAt: Date; paymentMethod: string; refunds: { amount: number; date: Date; reason: string }[]; shipping?: number; shippingMethod: string; supportEmail: string; taxRate?: number; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A paid receipt with the payment method, a partial refund and the net amount paid." }, { "name": "invoice-03", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/invoice.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/invoice/invoice-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/invoice/invoice-03.tsx" } ], "meta": { "shows": "A quote with optional items to tick before accepting, totals that follow and an expiry date.", "size": "full", "usedWith": [ "invoice-01", "billing-01" ], "component": "Invoice3", "props": "{ brand: { name: string; website: string }; currency?: string; defaultSelected?: string[]; discountRate?: number; expiresAt: Date; footer: string[]; from: { label: string; lines: string[]; name: string }; issueDate: Date; lines?: { detail?: string; description: string; id: string; optional?: boolean; quantity: number; sku?: string; taxRate?: number; unit?: string; unitPrice: number }[]; notes: string; now: Date; number: string; onAccept?: (selected: string[]) => Promise; onDecline?: () => Promise; preparedBy: string; preparedFor: { label: string; lines: string[]; name: string }; terms: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A quote with optional items to tick before accepting, totals that follow and an expiry date." }, { "name": "invoice-04", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/billing.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/invoice.json", "https://www.dashboardblocks.com/r/status-label.json" ], "files": [ { "path": "registry/components/dashboardblocks/invoice/invoice-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/invoice/invoice-04.tsx" } ], "meta": { "shows": "A packing slip listing items with SKU and bin, a pick checkbox for each and a barcode of the order number, with no prices.", "size": "full", "usedWith": [ "invoice-02", "inventory-01" ], "component": "Invoice4", "props": "{ billTo: { label: string; lines: string[]; name: string }; brand: { name: string; website: string }; footer: string[]; giftMessage?: string; lines?: { detail?: string; description: string; id: string; optional?: boolean; quantity: number; sku?: string; taxRate?: number; unit?: string; unitPrice: number }[]; onMarkPacked?: () => Promise; orderDate: Date; orderNumber: string; packages: string; returnsUrl: string; shipBy: Date; shipping: string; shipTo: { label: string; lines: string[]; name: string }; weight?: string; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A packing slip listing items with SKU and bin, a pick checkbox for each and a barcode of the order number, with no prices." }, { "name": "onboarding-01", "type": "registry:component", "registryDependencies": [ "button", "field", "input", "input-group", "https://www.dashboardblocks.com/r/checklist.json", "https://www.dashboardblocks.com/r/choice-cards.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/onboarding.json" ], "files": [ { "path": "registry/components/dashboardblocks/onboarding/onboarding-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/onboarding/onboarding-01.tsx" } ], "meta": { "shows": "A setup wizard that names the workspace, sets its URL, asks what it is for and invites the team, checking each step before moving on.", "size": "page", "usedWith": [ "onboarding-02" ], "component": "Onboarding1", "props": "{ defaultRole: string; domain: string; onCheckSlug?: (slug: string) => Promise; onComplete?: (workspace: { name: string; slug: string; useCase: string }, invites: { email: string; id: string; role: string }[]) => Promise; product: string; roles: { label: string; value: string }[]; useCases: { aside?: ReactNode; badge?: ReactNode; description?: ReactNode; disabled?: boolean; icon?: ReactNode; title: string; value: string }[]; userEmail: string }" }, "description": "A setup wizard that names the workspace, sets its URL, asks what it is for and invites the team, checking each step before moving on." }, { "name": "onboarding-02", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/checklist.json", "https://www.dashboardblocks.com/r/link.json", "https://www.dashboardblocks.com/r/onboarding.json", "https://www.dashboardblocks.com/r/progress-bar.json" ], "files": [ { "path": "registry/components/dashboardblocks/onboarding/onboarding-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/onboarding/onboarding-02.tsx" } ], "meta": { "shows": "The first page of an empty workspace with quick starts, an empty dashboards list, setup progress and help links.", "size": "page", "usedWith": [ "onboarding-01" ], "component": "Onboarding2", "props": "{ firstName: string; help: { description: string; href: string; icon: ReactNode; id: string; title: string }[]; quickStarts: { badge?: string; description: string; duration?: string; href: string; icon: ReactNode; id: string; title: string }[]; status?: \"loading\" | \"error\"; tasks?: { href?: string; id: string; state: \"done\" | \"todo\" | \"current\" | \"skipped\"; title: string }[]; templatesHref: string; tourHref: string; workspace: string; errorMessage?: string }" }, "description": "The first page of an empty workspace with quick starts, an empty dashboards list, setup progress and help links." }, { "name": "onboarding-03", "type": "registry:component", "registryDependencies": [ "button", "field", "input-group", "https://www.dashboardblocks.com/r/option-select.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/choice-cards.json", "https://www.dashboardblocks.com/r/link.json" ], "files": [ { "path": "registry/components/dashboardblocks/onboarding/onboarding-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/onboarding/onboarding-03.tsx" } ], "meta": { "shows": "A searchable, filterable list of data sources to pick from, then follow through connecting to connected, with an error state.", "size": "full", "usedWith": [ "onboarding-04", "checklist-01" ], "component": "Onboarding3", "props": "{ onConnect?: (id: string) => Promise; onContinue?: (id: string) => void; requestHref: string; sources?: { category: string; description: string; id: string; logo?: ReactNode; name: string; popular?: boolean }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A searchable, filterable list of data sources to pick from, then follow through connecting to connected, with an error state." }, { "name": "onboarding-04", "type": "registry:component", "registryDependencies": [ "button", "field", "https://www.dashboardblocks.com/r/choice-cards.json", "https://www.dashboardblocks.com/r/onboarding.json", "https://www.dashboardblocks.com/r/option-select.json" ], "files": [ { "path": "registry/components/dashboardblocks/onboarding/onboarding-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/onboarding/onboarding-04.tsx" } ], "meta": { "shows": "A short form asking for a role, a team size and up to three goals, then listing the dashboards set up for them.", "size": "half", "usedWith": [ "onboarding-03", "checklist-01" ], "component": "Onboarding4", "props": "{ goals: { dashboard: { description: string; href: string; title: string }; aside?: ReactNode; badge?: ReactNode; description?: ReactNode; disabled?: boolean; icon?: ReactNode; title: string; value: string }[]; maxGoals?: number; onSave?: (answers: { goals: string[]; role: string; teamSize: string }) => Promise; roles: { label: string; value: string }[]; teamSizes: { aside?: ReactNode; badge?: ReactNode; description?: ReactNode; disabled?: boolean; icon?: ReactNode; title: string; value: string }[] }" }, "description": "A short form asking for a role, a team size and up to three goals, then listing the dashboards set up for them." }, { "name": "error-pages-01", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/error-pages.json" ], "files": [ { "path": "registry/components/dashboardblocks/error-pages/error-pages-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages/error-pages-01.tsx" } ], "meta": { "shows": "A not found page that shows the missing path, a search and the places people usually look.", "size": "page", "usedWith": [ "error-pages-02" ], "component": "ErrorPages1", "props": "{ brand?: ReactNode; homeHref: string; links: { description: string; href: string; icon: ReactNode; title: string }[]; onSearch?: (query: string) => void; path?: string }" }, "description": "A not found page that shows the missing path, a search and the places people usually look." }, { "name": "error-pages-02", "type": "registry:component", "registryDependencies": [ "button", "textarea", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/error-pages.json" ], "files": [ { "path": "registry/components/dashboardblocks/error-pages/error-pages-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages/error-pages-02.tsx" } ], "meta": { "shows": "A no access page naming who can grant access, with a request form and the account you are signed in with.", "size": "page", "usedWith": [ "error-pages-01" ], "component": "ErrorPages2", "props": "{ brand?: ReactNode; homeHref: string; onRequestAccess?: (message: string) => void | Promise; owner: { avatar?: string; name: string }; requested?: boolean; resource: string; signedInAs: string; switchAccountHref: string }" }, "description": "A no access page naming who can grant access, with a request form and the account you are signed in with." }, { "name": "error-pages-03", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/disclosure.json", "https://www.dashboardblocks.com/r/settings.json", "https://www.dashboardblocks.com/r/error-pages.json", "https://www.dashboardblocks.com/r/highlighted-code.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/error-pages/error-pages-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages/error-pages-03.tsx" } ], "meta": { "shows": "A failure page with a retry button and count, a copyable error ID for support and the technical details folded away.", "size": "page", "usedWith": [ "error-pages-04" ], "component": "ErrorPages3", "props": "{ brand?: ReactNode; details?: string; errorId: string; occurredAt: Date; onRetry?: () => void | Promise; statusHref?: string; supportEmail?: string }" }, "description": "A failure page with a retry button and count, a copyable error ID for support and the technical details folded away." }, { "name": "error-pages-04", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/error-pages.json", "https://www.dashboardblocks.com/r/usage-meter.json" ], "files": [ { "path": "registry/components/dashboardblocks/error-pages/error-pages-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages/error-pages-04.tsx" } ], "meta": { "shows": "A maintenance page with what is being done, when it ends, progress through the window, the latest updates and an email sign-up.", "size": "page", "usedWith": [ "error-pages-03" ], "component": "ErrorPages4", "props": "{ brand?: ReactNode; endsAt: Date; now: Date; onSubscribe?: (email: string) => void; startsAt: Date; statusHref?: string; updates: { at: Date; id: string; text: string }[]; work: string }" }, "description": "A maintenance page with what is being done, when it ends, progress through the window, the latest updates and an email sign-up." }, { "name": "error-pages-05", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/error-pages.json" ], "files": [ { "path": "registry/components/dashboardblocks/error-pages/error-pages-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/error-pages/error-pages-05.tsx" } ], "meta": { "shows": "A signed-out page saying why the session ended and whether unsaved work was kept, with a sign-in link back to the same page.", "size": "page", "usedWith": [ "auth-03" ], "component": "ErrorPages5", "props": "{ brand?: ReactNode; email?: string; idleMinutes?: number; reason: \"revoked\" | \"inactive\" | \"signed-out\" | \"signed-out-elsewhere\" | \"password-changed\"; returnTo?: string; savedDraft?: boolean; signInHref: string }" }, "description": "A signed-out page saying why the session ended and whether unsaved work was kept, with a sign-in link back to the same page." }, { "name": "auth-01", "type": "registry:component", "registryDependencies": [ "button", "https://www.dashboardblocks.com/r/team.json", "https://www.dashboardblocks.com/r/auth.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-01.tsx" } ], "meta": { "shows": "An invite page showing the workspace, who invited you, your role and the people already there, with a prompt to switch account when the address differs.", "size": "page", "usedWith": [ "auth-02" ], "component": "Auth1", "props": "{ email: string; expired?: boolean; invitedBy: { avatar?: string; name: string }; onAccept?: () => void | Promise; onDecline?: () => void; role: string; roleDescription?: string; signedInAs?: string; switchAccountHref: string; workspace: { logo?: string; mark?: ReactNode; members: { avatar?: string; id: string; name: string }[]; memberCount: number; name: string } }" }, "description": "An invite page showing the workspace, who invited you, your role and the people already there, with a prompt to switch account when the address differs." }, { "name": "auth-02", "type": "registry:component", "registryDependencies": [ "button", "input", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/block-state.json", "https://www.dashboardblocks.com/r/details.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-02.tsx" } ], "meta": { "shows": "A list of the workspaces you belong to with your role in each, pending invites to join and a search once there are many.", "size": "page", "usedWith": [ "auth-01" ], "component": "Auth2", "props": "{ createHref: string; email: string; invites?: { id: string; invitedBy: string; logo?: string; mark?: ReactNode; name: string }[]; onAcceptInvite?: (id: string) => void | Promise; signOutHref: string; workspaces?: { href: string; id: string; logo?: string; mark?: ReactNode; members: number; name: string; role: string }[]; errorMessage?: string; status?: \"loading\" | \"error\" }" }, "description": "A list of the workspaces you belong to with your role in each, pending invites to join and a search once there are many." }, { "name": "auth-03", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/announcements.json", "button", "input", "switch", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/rolling-text.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-03.tsx" } ], "meta": { "shows": "A six-digit authenticator code form with a recovery code option, the tries left and a choice to trust the device.", "size": "page", "usedWith": [ "auth-04" ], "component": "Auth3", "props": "{ email: string; focusOnMount?: boolean; onVerified?: () => void; onVerify?: (code: string, options: { kind: \"app\" | \"recovery\"; trustDevice: boolean }) => { ok: boolean; attemptsLeft?: number } | Promise<{ ok: boolean; attemptsLeft?: number }>; signOutHref: string; trustDays?: number }" }, "description": "A six-digit authenticator code form with a recovery code option, the tries left and a choice to trust the device." }, { "name": "auth-04", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/announcements.json", "button", "input", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/rolling-text.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-04.tsx" } ], "meta": { "shows": "An email verification code form with a resend that waits between emails and a way to fix a mistyped address.", "size": "page", "usedWith": [ "auth-03" ], "component": "Auth4", "props": "{ email: string; focusOnMount?: boolean; onChangeEmail?: (email: string) => void | Promise; onResend?: () => void | Promise; onVerified?: () => void; onVerify?: (code: string) => boolean | Promise; resendAfter?: number }" }, "description": "An email verification code form with a resend that waits between emails and a way to fix a mistyped address." }, { "name": "auth-05", "type": "registry:component", "registryDependencies": [ "button", "field", "input", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/brand-logos.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/rolling-text.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-05.tsx" } ], "meta": { "shows": "One form to sign in or sign up, with Google, X and GitHub on one row, a password you can show, and a switch at the bottom that unfolds the sign-up fields and a password strength meter.", "size": "page", "usedWith": [ "auth-06", "auth-04" ], "component": "Auth5", "props": "{ defaultMode?: \"sign-in\" | \"sign-up\"; focusOnMount?: boolean; forgotPasswordHref?: string; onProvider?: (id: string) => void | Promise; onSignIn?: (values: { email: string; password: string }) => Promise; onSignUp?: (values: { email: string; name: string; password: string }) => Promise; productName: string; providers?: { icon: ReactNode; id: string; name: string }[]; signUpNote?: string; terms?: ReactNode }" }, "description": "One form to sign in or sign up, with Google, X and GitHub on one row, a password you can show, and a switch at the bottom that unfolds the sign-up fields and a password strength meter." }, { "name": "auth-06", "type": "registry:component", "registryDependencies": [ "https://www.dashboardblocks.com/r/announcements.json", "button", "field", "input", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/rolling-text.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-06.tsx" } ], "meta": { "shows": "A forgot password form that turns into a check your email page, with buttons to open the mail app and a resend that counts down.", "size": "page", "usedWith": [ "auth-05", "auth-07" ], "component": "Auth6", "props": "{ defaultEmail?: string; focusOnMount?: boolean; linkLifetime?: string; mailLinks?: { href: string; name: string }[]; onSend?: (email: string) => Promise; resendAfter?: number; signInHref: string }" }, "description": "A forgot password form that turns into a check your email page, with buttons to open the mail app and a resend that counts down." }, { "name": "auth-07", "type": "registry:component", "registryDependencies": [ "button", "field", "https://www.dashboardblocks.com/r/auth.json", "https://www.dashboardblocks.com/r/forms.json", "https://www.dashboardblocks.com/r/rolling-text.json" ], "files": [ { "path": "registry/components/dashboardblocks/auth/auth-07.tsx", "type": "registry:component", "target": "@components/dashboardblocks/auth/auth-07.tsx" } ], "meta": { "shows": "A new password form with a strength meter and the rules it still needs, a done state that leads to sign-in, and an expired link state.", "size": "page", "usedWith": [ "auth-06", "auth-05" ], "component": "Auth7", "props": "{ email?: string; forgotPasswordHref: string; linkExpired?: boolean; onSave?: (password: string) => Promise; signInHref: string }" }, "description": "A new password form with a strength meter and the rules it still needs, a done state that leads to sign-in, and an expired link state." }, { "name": "email-01", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-01.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-01.tsx" } ], "meta": { "shows": "A sign-in code email with the code on a dark panel, how long it works and who asked for it.", "size": "email", "usedWith": [ "email-02", "email-03", "auth-04" ], "component": "Email1", "props": "{ brand: { name: string; logo?: string }; code: string; expiresInMinutes: number; address?: string; request?: { at: Date; device: string; email: string; location: string }; timeZone?: string }" }, "description": "A sign-in code email with the code on a dark panel, how long it works and who asked for it." }, { "name": "email-02", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-02.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-02.tsx" } ], "meta": { "shows": "An invite email naming who invited you, the workspace and your role, with an Accept button and when the invite runs out.", "size": "email", "usedWith": [ "email-01", "email-03", "auth-01" ], "component": "Email2", "props": "{ acceptUrl: string; brand: { name: string; logo?: string }; email: string; expiresAt: Date; inviter: { email: string; name: string }; role: string; workspace: { members: number; name: string }; address?: string; timeZone?: string }" }, "description": "An invite email naming who invited you, the workspace and your role, with an Accept button and when the invite runs out." }, { "name": "email-03", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-03.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-03.tsx" } ], "meta": { "shows": "A receipt email with the amount paid on a dark panel, the lines that add up to it and a link to the invoice.", "size": "email", "usedWith": [ "email-01", "email-02" ], "component": "Email3", "props": "{ amount: number; billingUrl: string; brand: { name: string; logo?: string }; invoiceUrl: string; lines: { amount: number; label: string; detail?: string }[]; number: string; paidAt: Date; paymentMethod: string; plan: { name: string; renewsAt: Date }; address?: string; currency?: string; timeZone?: string }" }, "description": "A receipt email with the amount paid on a dark panel, the lines that add up to it and a link to the invoice." }, { "name": "email-04", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-04.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-04.tsx" } ], "meta": { "shows": "A failed payment email with the amount due on a dark panel, the card and the bank's reason, Update card, and when it's tried again.", "size": "email", "usedWith": [ "email-03", "email-05", "billing-02" ], "component": "Email4", "props": "{ amount: number; brand: { name: string; logo?: string }; invoiceUrl: string; paymentMethod: string; plan: string; updateUrl: string; address?: string; currency?: string; reason?: string; retryAt?: Date; suspendsAt?: Date; timeZone?: string }" }, "description": "A failed payment email with the amount due on a dark panel, the card and the bank's reason, Update card, and when it's tried again." }, { "name": "email-05", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-05.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-05.tsx" } ], "meta": { "shows": "A trial ending email counting the days left on a dark panel, with Add a card and what changes on the plan the workspace moves to.", "size": "email", "usedWith": [ "email-04", "email-06", "billing-02" ], "component": "Email5", "props": "{ billingUrl: string; brand: { name: string; logo?: string }; endsAt: Date; plan: { interval: \"month\" | \"year\"; name: string; price: number }; workspace: string; address?: string; currency?: string; downgrade?: { changes: { now: string; label: string; after: string }[]; plan: string }; paymentMethod?: string; sentAt?: Date; timeZone?: string }" }, "description": "A trial ending email counting the days left on a dark panel, with Add a card and what changes on the plan the workspace moves to." }, { "name": "email-06", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-06.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-06.tsx" } ], "meta": { "shows": "A usage alert email with how much of a limit is used, a meter on a dark panel, when it resets, and the usage by project.", "size": "email", "usedWith": [ "email-04", "email-05", "usage-meter-01" ], "component": "Email6", "props": "{ brand: { name: string; logo?: string }; limit: number; metric: string; plan: string; resetsAt: Date; upgradeUrl: string; used: number; usageUrl: string; address?: string; atLimit?: string; projectedAt?: Date; sources?: { name: string; used: number }[]; sourcesTitle?: string; timeZone?: string }" }, "description": "A usage alert email with how much of a limit is used, a meter on a dark panel, when it resets, and the usage by project." }, { "name": "email-07", "type": "registry:component", "dependencies": [ "react-email" ], "registryDependencies": [ "https://www.dashboardblocks.com/r/email.json", "https://www.dashboardblocks.com/r/format.json" ], "files": [ { "path": "registry/components/dashboardblocks/email/email-07.tsx", "type": "registry:component", "target": "@components/dashboardblocks/email/email-07.tsx" } ], "meta": { "shows": "A welcome email with the first step and its button on a dark panel, the steps after it, and who answers a reply.", "size": "email", "usedWith": [ "email-01", "email-02", "onboarding-01" ], "component": "Email7", "props": "{ brand: { name: string; logo?: string }; firstStep: { action: string; description: string; title: string; url: string }; address?: string; helpUrl?: string; name?: string; nextSteps?: { action: string; description: string; title: string; url: string }[]; sender?: { name: string; role: string }; workspace?: string }" }, "description": "A welcome email with the first step and its button on a dark panel, the steps after it, and who answers a reply." }, { "name": "use-animated-number", "type": "registry:hook", "title": "Use Animated Number", "description": "A hook for animating a number.", "registryDependencies": [ "https://www.dashboardblocks.com/r/use-in-view.json" ], "files": [ { "path": "registry/hooks/use-animated-number.tsx", "type": "registry:hook", "target": "@hooks/use-animated-number.tsx" } ] }, { "name": "use-in-view", "type": "registry:hook", "title": "Use In View", "description": "A hook that tracks whether an element is visible in the viewport using IntersectionObserver.", "files": [ { "path": "registry/hooks/use-in-view.tsx", "type": "registry:hook", "target": "@hooks/use-in-view.tsx" } ] }, { "name": "use-reveal", "type": "registry:hook", "title": "Use Reveal", "description": "A hook that turns true the frame after an element scrolls into view, so a bar or ring can animate from zero.", "registryDependencies": [ "https://www.dashboardblocks.com/r/use-in-view.json" ], "files": [ { "path": "registry/hooks/use-reveal.tsx", "type": "registry:hook", "target": "@hooks/use-reveal.tsx" } ] } ] }