Animated gradient borders for React. Wrap any component with a single line.

LiveStroke decorates your existing components with animated gradient borders—no redesign, no custom CSS.

Use Cases

searchWhat are you looking for?

terminalAccess Interactive Demo

info

npm install live-stroke

import { LiveStroke } from "live-stroke";

<LiveStroke preset="rainbow">
    <YourButton>Content</YourButton>
</LiveStroke>

Text goes here

Preset

Stroke Size

SmMdLg

Speed

SlowNormalFast

Opacity

Shadow

Colors (Add up-to 4)

<LiveStroke preset="rainbow" strokeSize="md" speed="normal" opacity={100} shadow>
  <button>Text goes here</button>
</LiveStroke>