dashboardcn
2

Activity Rings Card

PreviousNext

A card with concentric goal rings and a tile per ring with its value. Hovering a tile or a ring focuses the pair.

Activity
Today
  • Move1,592 kcal88% of goal
  • Exercise1h 45m88% of goal
  • Running5.2 km65% of goal
import { ActivityRingsCard } from "@/registry/dashboardcn/blocks/activity-rings-card"

export default function ActivityRingsCardDemo() {

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/activity-rings-card.json

Also installs card from shadcn/ui if missing.

Usage

import { ActivityRingsCard } from "@/components/activity-rings-card"

<ActivityRingsCard
  title="Activity"
  caption="Today"
  metrics={[
    { label: "Move", value: 1592, max: 1800, unit: "kcal", color: "var(--color-pink-500)" },
    { label: "Exercise", value: 105, max: 120, display: "1h 45m", color: "var(--color-lime-500)" },
    { label: "Running", value: 5.2, max: 8, unit: "km", color: "var(--color-sky-500)" },
  ]}
/>

Examples

Side by side

layout="side" puts the tiles next to the rings. center renders content in the middle of the rings.

Weekly goals
Sep 1 – Sep 7
87of 105
  • Deploys4284% of goal
  • Reviews1860% of goal
  • Issues closed27100% of goal
import { ActivityRingsCard } from "@/registry/dashboardcn/blocks/activity-rings-card"

export default function ActivityRingsCardSideDemo() {