Get everything for $99, lifetime

Components

Beams

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/beams

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 · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { Beams } from "@/components/ui/Beams";

<section className="relative h-[560px] bg-black">
  <Beams />
  <h1 className="absolute inset-x-0 top-1/3 text-center text-white">
    Your headline
  </h1>
</section>

Use cases

  • Hero backdrop

    The light stays in a band with black corners and floor, so a headline reads cleanly on top.

  • Launch page

    Printed-light texture without a canvas or a shader, so it ships anywhere CSS does.

  • Section divider

    Short and wide, it makes a break between two dark sections without a hard edge.