$99 launch price

Components

Shader Area

Pro

revenue

last 30 days

Customize

<ShaderArea />

Installation

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

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
<ShaderArea
  data={[
    { label: "Sep 12", value: 1840 },
    { label: "Sep 13", value: 2210 },
    { label: "Sep 14", value: 1975 },
  ]}
  fill="dither"
  colors={["#000000", "#1d4ed8", "#93c5fd"]}
  height={280}
/>

Use cases

  • Revenue hero

    A landing-page stat whose chart is a piece of brand texture, not a grey Recharts default.

  • Dashboard headline metric

    The one chart at the top of a dashboard that deserves to move; the rest stay flat.

  • Changelog or launch post

    Signups-over-time embedded in a post, with a hover that reads the exact day.

  • Pricing page proof

    Usage growth under a plan card, with `solid` fill where WebGL budget is spent elsewhere.