ShineBorder
v1.0.1NewUpdated 21 Jul 2026Animated conic-gradient border that sweeps around its contents (MagicUI source, themed with build69 tokens). Use sparingly to mark premium tiles, AI-generated content, or featured pins.
Preview
Live · 10 storiesDefaultOpen ↗
▸Why this is recommendeddecorativeanimationbordergradient+4
The default, out-of-the-box ShineBorder.
Recommended for+14
- ✓Premium plan tile
- ✓AI-generated content marker
- ✓Featured pinned card
- ✓Onboarding spotlight
Tags+6
decorativeanimationbordergradienthighlightpremiummagicuidefault
Features+4
- Conic-gradient ribbon rotation
- Configurable thickness + duration
- Custom color stops (defaults to brand sunrise)
- Rounded variants: md / lg / xl / full
- Pause + bleed options
- Low-level ShineBorderPrimitive export for custom shimmer patterns
Not recommended for−2
- ✕Routine UI surfaces (the animation is loud)
- ✕Dense data tables
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
thicknessRing thickness in px
—durationRotation period in ms
—colorsRibbon color stops
—roundedCorner radius
—pausedFreeze animation
—