Components
Loading preview...
Here is background animated button component
npx shadcn@latest add https://21st.dev/r/cult-ui/bg-animated-buttonimport { Component } from "@/components/ui/bg-animated-button"
type Gradients =
| "sunrise"
| "ocean"
| "candy"
| "default"
| "forest"
| "sunset"
| "nebula"
type Radius = "full" | "xl" | "2xl" | "3xl" | "sm"
type Animations = "spin" | "pulse" | "spin-slow" | "spin-fast"
const gradients: Gradients[] = [
"sunrise",
"ocean",
"candy",
"forest",
"sunset",
"default",
"nebula",
]
const roundings: Radius[] = ["full", "xl", "2xl", "3xl", "sm"]
const animations: Animations[] = ["spin", "pulse", "spin-slow", "spin-fast"]
const BgAnimateButtonsDemo = () => {
return (
<div className="w-full max-w-4xl">
<div className=" sm:px-12 md:px-24 flex flex-col justify-center rounded-lg space-y-4">
<div className="grid grid-cols-3 gap-4">
{roundings.slice(0, 2).map((rounding, i) => (
<Component
gradient={gradients[i + 1]}
key={rounding}
rounded={rounding}
>
{rounding}
</Component>
))}
</div>
<div className="grid grid-cols-3 gap-4">
{roundings.slice(2, 5).map((rounding, i) => (
<Component
gradient={gradients[i + 1]}
key={rounding}
rounded={rounding}
>
{rounding}
</Component>
))}
</div>
<div className="grid grid-cols-2 gap-4">
{animations.map((animationType, i) => (
<Component
key={animationType}
gradient={gradients[i + 2]}
variant="ghost"
animation={animationType}
>
{animationType}
</Component>
))}
</div>
</div>
</div>
)
}
export default BgAnimateButtonsDemo