Background Lines

Animated lines radiating from center with customizable color schemes. Choose from vibrant, neon, pastel, and more themes. Works in both dark and light modes.

Preview

Dynamic Lines

Radiating energy

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/background-lines.json

Usage

tsx
15 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { BackgroundLines } from "@/components/ui/background-lines"

export default function Hero() {
  return (
    <BackgroundLines 
      colorScheme="neon"
      svgOptions={{ duration: 8 }}
      lineCount={15}
    >
      <div className="flex flex-col items-center justify-center h-screen">
        <h1 className="text-4xl font-bold">Your Content</h1>
      </div>
    </BackgroundLines>
  )
}

Color Schemes

Neon

Neon Colors

Pastel

Pastel Colors

Sunset

Sunset Colors

Ocean

Ocean Colors

Options

Static (Non-Animated)

Static Lines

Thick Lines

Thick Strokes

Props

PropTypeDefaultDescription
childrenReact.ReactNodeundefinedContent to render on top of the animated lines
colorScheme'vibrant' | 'neon' | 'pastel' | 'monochrome' | 'sunset' | 'ocean' | 'custom'vibrantColor theme preset for the lines
customColorsstring[]undefinedArray of custom colors (used when colorScheme is 'custom')
svgOptions.durationnumber10Animation duration in seconds for each line
strokeWidthnumber2.3Width of the line strokes
animatedbooleantrueWhether to animate the lines
lineOpacitynumber1Opacity of the lines (0 to 1)
lineCountnumber21Number of lines to display (1 to 21)
classNamestringundefinedAdditional CSS classes for the container