Components
Loading preview...
A container component that applies a warp animation effect to its children
npx shadcn@latest add https://21st.dev/r/dillionverma/warp-backgroundimport { WarpBackground } from "@/components/ui/warp-background";
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "@/components/ui/card";
export function ExampleComponentDemo() {
return (
<WarpBackground>
<Card className="w-80">
<CardContent className="flex flex-col gap-2 p-4">
<CardTitle>Congratulations on Your Promotion!</CardTitle>
<CardDescription>
Your hard work and dedication have paid off. We're thrilled to
see you take this next step in your career. Keep up the fantastic
work!
</CardDescription>
</CardContent>
</Card>
</WarpBackground>
);
}