Aurora gradient border.
import { GradientBorder } from "@cooud-ui/ui";
npx cooud-ui add gradient-border
Generated from the component's exported types.
Extends HTMLAttributes<HTMLDivElement>
| Prop | Type | Default | Description |
|---|---|---|---|
innerClassName | string | — | — |
glow | boolean | false | — |
Pass `glow` to add an ambient shadow that draws the eye to a hero surface.
The glowing border draws the eye to your highest-value surface.
<GradientBorder glow innerClassName="flex flex-col gap-3 bg-surface-raised p-5"><h3 className="font-display text-base font-semibold text-fg">Pro plan</h3><p className="text-sm text-fg-secondary">The glowing border draws the eye to your highest-value surface.</p><div className="flex items-baseline gap-1"><span className="font-display text-2xl font-semibold text-fg">$29</span><span className="text-sm text-fg-tertiary">/ month</span></div></GradientBorder>
Omit `glow` for the same gradient ring, kept calm for secondary surfaces.
The same gradient ring, kept calm and flat for secondary surfaces.
<GradientBorder innerClassName="flex flex-col gap-3 bg-surface-raised p-5"><h3 className="font-display text-base font-semibold text-fg">Starter plan</h3><p className="text-sm text-fg-secondary">The same gradient ring, kept calm and flat for secondary surfaces.</p><div className="flex items-baseline gap-1"><span className="font-display text-2xl font-semibold text-fg">$0</span><span className="text-sm text-fg-tertiary">/ forever</span></div></GradientBorder>