border-beam/by Frad

WGSL shaders.
A better edge.

Color and glow, written in WGSL.
WebGPU rendering for React & shadcn/ui.

Add to your project
Live previewmd / colorful
Give your ideas
an edge.

A little light. A different feeling.

border-beam by Frad
Effects enabled2.3s / cycle
Use this configurationReact
import { BorderBeam } from "@/components/ui/border-beam"
import { Card } from "@/components/ui/card"

<BorderBeam
  size="md"
  colorVariant="colorful"
  theme="dark"
  strength={0.7}
  duration={2.3}
  active={true}
>
  <Card>Content</Card>
</BorderBeam>
One WGSL shader. Stroke, inner glow, and bloom.Read the WGSL shaderWebGPU rendering · CSS fallback

Familiar components.
A different presence.

Eight ready-to-use wrappers. The shadcn API you know.

Button
A clear next step.
Install button
pnpm dlx shadcn@latest add https://border-beam.frad.me/r/border-beam-button.json
Card
A surface worth noticing.
Your next project

Start with a brighter canvas.

Install card
pnpm dlx shadcn@latest add https://border-beam.frad.me/r/border-beam-card.json
Input
Bring focus to the details.
Install input
pnpm dlx shadcn@latest add https://border-beam.frad.me/r/border-beam-input.json
Textarea
Room for a bigger idea.
Install textarea
pnpm dlx shadcn@latest add https://border-beam.frad.me/r/border-beam-textarea.json

Your next border.
One command away.

Read the docs
Install with shadcnReact
pnpm dlx shadcn@latest add https://border-beam.frad.me/r/border-beam.json

WGSL shader, component, and CSS. In your codebase.

Ready for Next.js. No extra configuration.