Beam - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/beam.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Beam } from "@/components/ui/beam"

<Beam>
  <Card>Content</Card>
</Beam>

Examples

Button

Compact glow around a button.

Input

Around an input — great for AI-style search bars.

Line

Bottom-only traveling glow.

Colors

All four color palettes side by side.

Static

No hue shift — subtle monochrome glow.

Toggle

Fade in / out via the active prop.

Decorative layers use pointer-events: none, so keyboard focus and screen readers pass through to the children. Honors prefers-reduced-motion — animation is disabled for users who request it.

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "line"`	`"md"`	Size preset. `line` is a bottom-only traveling glow.
`colorVariant`	`"colorful" \| "mono" \| "ocean" \| "sunset"`	`"colorful"`	Color palette.
`theme`	`"dark" \| "light" \| "auto"`	`"dark"`	Adapts stroke and glow for the background. `auto` follows the .dark class on <html> or prefers-color-scheme.
`active`	`boolean`	`true`	Toggle animation with a fade transition.
`staticColors`	`boolean`	`false`	Disable the hue-shift animation.
`duration`	`number`	`1.96 (md, sm) / 2.4 (line)`	Beam travel cycle in seconds.
`strength`	`number (0–1)`	`1`	Overall effect opacity. Doesn't affect children.
`brightness`	`number`	`1.3`	Glow brightness multiplier.
`saturation`	`number`	`1.2 (dark) / 0.96 (light)`	Glow saturation multiplier.
`hueRange`	`number`	`30`	Hue-shift range in degrees.
`borderRadius`	`number`	—	Override in pixels. Auto-detected from the first child when omitted.
`onActivate`	`() => void`	—	Fires when fade-in completes.
`onDeactivate`	`() => void`	—	Fires when fade-out completes.

Build anything…

Agent Auto

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/beam.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Beam } from "@/components/ui/beam"

<Beam>
  <Card>Content</Card>
</Beam>

Examples

Button

Compact glow around a button.

Input

Around an input — great for AI-style search bars.

Line

Line Beam

Bottom-only traveling glow

Bottom-only traveling glow.

Colors

Colorful

colorful

Mono

mono

Ocean

ocean

Sunset

sunset