$99 launch price

Components

Shader Stat Tiles

Pro

Customize

<ShaderStatTiles />

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/shader-stat-tiles

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 132 Pro components · lifetime updates.

I have a licenseGet Pro
<ShaderStatTiles
  fill="dither"
  items={[
    { label: "Revenue", value: 48210, delta: 12.4, format: "currency", currency: "USD", series: revenue },
    { label: "Churn", value: 0.018, delta: -1.2, format: "percent", invertDelta: true, series: churn },
  ]}
/>

Use cases

  • Dashboard header

    Revenue, users, conversion and churn above the fold, each with its own colour world.

  • Investor update

    Four headline numbers that count up as the page comes into view.

  • Status page

    Uptime, latency and error rate with sparklines that read as an ink wash, not a chart widget.

  • Product analytics

    Per-feature adoption tiles where hovering shows the exact value on any day.