Björk UI

Components•Animated radial chart

Animated radial chart

A production-grade radial progress display for dense dashboards, car-style HUDs, and high-signal metrics. The animation is driven by Framer Motion motion values, so changing the value, stroke, speed, or label state updates the chart directly without remounting the whole page shell.

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/animated-radial-chart

How to use

import { AnimatedRadialChart } from "@/components/isaiahbjork/charts/animated-radial-chart";export function Demo() {  return (    <AnimatedRadialChart      value={74}      size={330}      strokeWidth={20}      showLabels      duration={1.6}    />  );}

Keep in mind

This page is the first standardized component detail pass. The preview, source drawer, options panel, and left index are shared shell pieces so the rest of the component routes can move into the same system without rebuilding the page chrome each time.

100%