StarBorder
star-borderAnimates star-like highlights around a content border.
Usage
Basic usage
The default rendering is a button, with the upper and lower meteor light strips sweeping back and forth along the stroke; the light strip color is primary token.
<StarBorder>Start now</StarBorder>Custom color
color Feed radial-gradient, you can pass any CSS color or token.
<StarBorder color="var(--color-chart-3)">Limited time event</StarBorder>Speed and thickness
speed The smaller it is, the more active it is; thickness spreads the upper and lower padding to determine the stroke thickness.
<StarBorder speed={3} thickness={2}>
Highly active
</StarBorder>Polymorphic rendering (as)
as="a" is rendered as a link, and the DOM attribute is transparently passed to the element.
<StarBorder as="a" href="/docs" color="var(--color-chart-2)">
View document →
</StarBorder>When to Use
Use it when you need a CTA button/link with a glowing stroke that attracts clicks. Compared with BorderBeam/ShineBorder packages that "add border light effects to any card container", StarBorder comes with button semantics (the default rendering is <button>, and the inner shell is the button skin), which can be used directly as a button; if you just want to illuminate an existing piece of content without a button, use ShineBorder/BorderBeam.
Import
import { StarBorder } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | ElementType | "button" | Render root tag, "a"/"div"/any component can be passed; DOM attributes are transparently passed to the element |
| color | string | var(--color-primary) | Meteor light band color, fed into radial-gradient; any CSS color (hex/oklch/var(--…)) can be used |
| speed | number | 6 | The duration of a single meteor sweep (seconds), the bigger, the slower, the more restrained |
| thickness | number | 1 | Border light strip thickness (px), open the top and bottom padding of the root container to determine the stroke thickness |
| className | string | — | Forward the additional class name of the root container (merged, can cover rounded corners/spacing) |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button/container content |
Usage Guidelines
- When customizing
colortoken, be sure to bring the--color-prefix (such asvar(--color-chart-3)). The barevar(--primary)does not resolve under Tailwind v4. See [[hulian-token-color-var-needs-color-prefix]]. - The reduced-motion light band automatically stops (does not move but the stroke is still there), no additional processing is required.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<StarBorder
color="var(--color-primary)"
speed={6}
thickness={1}
>
Start now
</StarBorder>