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>
    <YourButton>Content</YourButton>
</LiveStroke>

Text goes here

Stroke Size

SmMdLg

Speed

SlowNormalFast

Opacity

Shadow

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