Fluid Gradient
Fully Customisable Animated Background Component.
Hello World
Installation
npx shadcn@latest add https://thetaui.vercel.app/r/fluid-gradient.jsonpnpm dlx shadcn@latest add https://thetaui.vercel.app/r/fluid-gradient.jsonyarn shadcn@latest add https://thetaui.vercel.app/r/fluid-gradient.jsonbunx --bun shadcn@latest add https://thetaui.vercel.app/r/fluid-gradient.jsonUsage
import { FluidGradient } from "@/components/ui/fluid-gradient";
const FluidGradientDemo = () => {
return (
<section className="relative flex h-full w-full items-center justify-center">
<FluidGradient className="flex justify-center items-center" >
<p className="text-white text-6xl font-bold tracking-tight lg:text-8xl lg:tracking-tighter">
Hello World
</p>
</FluidGradient>
</section>
);
};
export default FluidGradientDemo;