saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
Docs/Components/Beam

Beam

Animated traveling-glow border effect. Wraps any element with a multi-layer beam that respects border-radius, theme, and interactivity. Adapted from border-beam by Jakub Antalik (MIT).

Loading...

Installation

pnpm dlx shadcn@latest add @saturation-ui/beam

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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

Loading...
Compact glow around a button.

Input

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

Line

Loading...
Bottom-only traveling glow.

Colors

Loading...
All four color palettes side by side.

Static

Loading...
No hue shift — subtle monochrome glow.

Toggle

Loading...
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

PropTypeDefaultDescription
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.
activebooleantrueToggle animation with a fade transition.
staticColorsbooleanfalseDisable the hue-shift animation.
durationnumber1.96 (md, sm) / 2.4 (line)Beam travel cycle in seconds.
strengthnumber (0–1)1Overall effect opacity. Doesn't affect children.
brightnessnumber1.3Glow brightness multiplier.
saturationnumber1.2 (dark) / 0.96 (light)Glow saturation multiplier.
hueRangenumber30Hue-shift range in degrees.
borderRadiusnumber—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.
PreviousBadgeNextBlur Fade

On This Page

  • Installation
  • Usage
  • Examples
  • Button
  • Input
  • Line
  • Colors
  • Static
  • Toggle
  • API Reference
Build anything…
Agent Auto

Line Beam

Bottom-only traveling glow

Colorful

colorful

Mono

mono

Ocean

ocean

Sunset

sunset

Static

No hue shift — a subtle monochrome glow

Beam is on

Toggle to fade in / out