Stacked Explorer: free React component

Install

Run this in any project set up for the shadcn CLI. It copies the Stacked Explorer source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/stacked-explorer.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { StackedExplorer } from "@/components/stacked-explorer";

export default function Page() {
  return <StackedExplorer />;
}

Built with

A free React component in the Numbers collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: select
npm: motion

Props

Read from the Stacked Explorer source. Everything is optional unless it says required.

Prop	Type	Default
title	string	"Breakdown"
data	ExplorerData	defaultData
defaultMeasure	string	—
defaultSlice	string	—
locale	string	"en-US"
className	string	—

More in Numbers

073

Metric Card

One number with its own hand-drawn chart: switch the range and the lines reshape, scrub with a pointer or the arrow keys for exact figures, and the headline follows wherever you are.

074

Split Card

A total and what it's made of, in one small card: switch the period and the figures roll, the bar re-proportions and the ranked rows quietly trade places.

076

Since You Left

What moved while you were away, one metric per row: a tiny trend line, the number now, and a change chip that knows when down is the good news.

077

Mini Sheet

A pocket spreadsheet on coss ui table styles: drag or shift-select a range, type to edit, copy and paste straight from your sheets app, sort with rows that slide into order, and undo any of it.