Components
Loading preview...
Here is Warp Background animation
npx shadcn@latest add https://21st.dev/r/nyxbui/warp-background// demo.tsx
'use client';
import * as React from "react";
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "@/components/ui/card";
import { Component } from "@/components/ui/warp-background";
import { cn } from "@/lib/utils";
const DemoOne = () => {
return (
<div className={cn("flex w-full min-h-screen justify-center items-center bg-background p-4")}>
<Component>
<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>
</Component>
</div>
);
};
export default DemoOne;