Spark UI
Back to UI Kit

Drill Sunburst

A two-ring sunburst: click a slice to zoom it to the full circle with its children, then click the centre to go back.

Interactive Stage Preview

Customize

6 options
Accent Color
Categories
5
Ring Gap
4
Slice Gap
1.2
Legend
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add drill-sunburst

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Base color; slices use its shades.
categoriesnumber5Number of top-level slices.
ringGapnumber4Space between the two rings.
padAnglenumber1.2Angular gap between slices, in degrees.
showLegendbooleantrueShow the legend beside the chart.
speednumber100Playback speed of entry and transition animations, as a percentage.