Gallery

Chart card

A chart in a card on shadcn's Chart, with the period's figure and change.

Reference: OpenRouter Activity (openrouter-p1.png); Cloudflare analytics (crawl/cloudflare-05.png)

Preview

Visitor events
27,043
Down 6.8% vs previous 30 days
Visitor events per day over 30 days, between 700 and 1,100.
Consent choices
Accepted and rejected choices per day over 30 days.

Focus rings

Visitor events
27,043
Down 6.8% vs previous 30 days
Visitor events per day over 30 days, between 700 and 1,100.
Consent choices
Accepted and rejected choices per day over 30 days.

In each theme: Default · Trackable · SkillDecks · BetterMarketer

Install

npx shadcn@4.23.0 add https://ui.dobrin-dobrev.co.uk/r/chart-card.json

Into an app set up with shadcn init --base radix; the parts it uses come with it.

Files

  • registry/default/blocks/chart-card.tsx → components/blocks/chart-card.tsx