ShineBorder
A border with a subtle linear shine that travels around the perimeter. Softer and less aggressive than BorderBeam — ideal for cards, panels, and inputs.
When to Use
- Pricing cards or feature cards that need a premium feel without heavy animation.
- Dashboard panels or stat widgets that subtly draw attention.
- Profile cards or selection states with a refined animated border.
Pro Plan
Everything you need to ship faster.
Amber Shine
Violet Shine
API Reference
ShineBorder
| Property | Type | Default | Description |
|---|---|---|---|
| DurationMs | int | 3000 | Duration of one full perimeter sweep in milliseconds. |
| BorderRadius | int | 8 | Border radius in pixels. |
| ShineColor | string | "var(--color-primary)" | Color of the shine highlight. Any CSS color value. |
| ShineWidthPct | int | 20 | Width of the shine arc as a percentage of the perimeter. |
| ChildContent | RenderFragment? | null | Card or panel content wrapped by the shine border. |
Related Components
- BorderBeam — More prominent animated gradient border beam.
- HoverBorderGradient — Border gradient that follows cursor position.
- MagicCard — Card with cursor-following spotlight.