Beam Card
Overview
A card wrapped in an animated border beam, traveling or breathing, in four color palettes.
This card component is intended for interfaces that need a card wrapped in an animated border beam, traveling or breathing, in four color palettes, SaaS dashboards, and product pages. Its implementation is provided as editable source so the final behavior and styling stay inside your project.
Technologies
Detected package dependencies: border-beam.
Traveling · colorful
Realtime collaboration
Cursors, comments and presence sync in under 40ms, everywhere.
Breathing · ocean
Edge inference
Models run in the region closest to the user, with a warm cache.
18 ms p95
Traveling and breathing beams that hug the radius of each card.
Installation
Usage
import { BeamCard } from "@/components/spectrumui/beam-card"<BeamCard size="pulse-outside" colorVariant="ocean" eyebrow="Pro" title="Edge inference" description="Models run in the region closest to the user." />
API Reference
BeamCard
Wraps a card surface in BorderBeam from the border-beam package (Jakub Antalík, MIT). The beam reads the card's own border radius, so it hugs the corners at any size. The rotate family travels around the edge; the pulse family breathes.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | - | Small mono label above the title |
title | string | - | Card title |
description | string | - | Supporting copy under the title |
children | ReactNode | - | Body content rendered under the description |
size | "md" | "sm" | "pulse-inner" | "pulse-outside" | "md" | md travels, pulse-inner breathes inside, pulse-outside blooms outward |
colorVariant | "colorful" | "ocean" | "sunset" | "mono" | "colorful" | Beam palette |
theme | "auto" | "dark" | "light" | "auto" | auto follows a .dark/.light class on <html>, then the OS preference |
active | boolean | true | Play, or fade the beam out |
strength | number | 1 | Beam intensity from 0 to 1 |
className | string | - | Classes for the inner card |
Use cases
- interfaces that need a card wrapped in an animated border beam, traveling or breathing, in four color palettes
- SaaS dashboards
- product pages
Features
- Copy-paste source that remains in your repository
- TypeScript source included with the component
- Tailwind CSS classes editable in the component source
- Spectrum UI registry dependencies: @spectrumui/use-surface-theme
- Responsive Tailwind variants present in the source
Accessibility
- Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.
Customization
- Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
- Use the documented className surface for local layout adjustments, then edit the source for structural changes.
Related components
Beam Card FAQ
Is Beam Card free to use in commercial projects?
Yes. The public Beam Card source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.
How do I install Beam Card?
Run npx shadcn@latest add @spectrumui/beam-card. The page also exposes the source for manual installation.
Does Beam Card require Motion?
No Motion dependency was detected in the documented source or registry entry for Beam Card.
Does Beam Card use shadcn/ui or Radix UI?
No shadcn/ui or Radix UI dependency was detected in the documented Beam Card source.
Can I use Beam Card in Next.js?
The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.
What accessibility checks should I run for Beam Card?
No component-specific accessibility mechanism was detected automatically. Test keyboard operation, focus, labels, contrast, and screen-reader output before shipping.