Browse components
Background Paths
Two layered ribbons of flowing SVG curves with light running along their strokes. Pure SVG + CSS.
Installation
npx shadcn@latest add @glint-ui/background-pathsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/background-paths.json
Usage
import { BackgroundPaths } from "@/components/ui/background-paths";
<div className="relative h-96">
<BackgroundPaths color="#a78bfa" accent="#22d3ee" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#a78bfa" | Color at the start of each curve. |
| accent | string | "#22d3ee" | Color at the end of each curve. |
| count | number | 32 | Curves per layer. |
| speed | number | 1 | Animation speed multiplier. |
| strokeWidth | number | 1 | Stroke width multiplier. |
| className | string | — | Extra classes for the root element. |