Spark UI
Back to UI Kit

Tiered Hierarchy

A level-by-level pyramid where each tier's width scales to its share of the total.

Interactive Stage Preview

Customize

7 options
Accent Color
Tiers
4
Tier Height
26
Corner Radius
12
Inverted
Labels
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 mono-tier-pyramid-stack

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'Primary series color.
tiersnumber4Number of levels in the pyramid.
tierHeightnumber26Height of each level in pixels.
radiusnumber12Rounding on each level.
invertedbooleanfalseFlip into a funnel with the widest tier on top.
showLabelsbooleantrueShow the tier names.
speednumber100Playback speed of entry and transition animations, as a percentage.