Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

BlockReactregistry:block2 dependencies

Stat cards

stat-cards

A responsive grid of KPI cards, each showing a value with a delta badge versus last month.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

A responsive grid of KPI cards, each showing a value with a delta badge versus last month. Do: Match badge tone to whether the delta is actually good news for that metric (e.g. rising churn is bad, so it gets destructive tone even though the number itself looks like growth). Don't: Default every rising number to a positive tone — a rising "Open tickets" count is bad news, not good. Use analytics-charts when you need to show the trend shape over time, not just the current value and one delta. Use data-table when you have more metrics than fit comfortably in a card grid, or need to compare many rows at once.
@quill

More from @quill