Loading...
"use client"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center">
<GradientBars />
</div>
)
}
Loading...
"use client"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center">
<GradientBars colors={["#6366f1", "#22d3ee", "transparent"]} />
</div>
)
}
Loading...
"use client"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center">
<GradientBars
orientation="horizontal"
colors={["#ff0000", "transparent"]}
/>
<GradientBars
orientation="horizontal"
colors={["#ff0000", "transparent"]}
className="rotate-180"
/>
</div>
)
}
Loading...
"use client"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center">
<GradientBars
animation="wave"
duration={3}
colors={["#f97316", "transparent"]}
/>
</div>
)
}
Loading...
"use client"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center">
<GradientBars
numBars={40}
minScale={0.1}
maxScale={1}
colors={["#00ff00", "transparent"]}
/>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/gradient-bars.json
Usage
import { GradientBars } from "@/components/ui/gradient-bars"<GradientBars />Props
| Prop | Type | Default |
|---|---|---|
| className | string | — |
| numBars | number | 15 |
| colors | string[] | ["#000fff", "transparent"] |
| orientation | "vertical" | "horizontal" | "vertical" |
| animation | "wave" | "pulse" | "none" | "wave" |
| duration | number | 2 |
| delayStep | number | 0.1 |
| minScale | number | 0.2 |
| maxScale | number | 1 |
savd

