Docs
Reminder
A reminder widget shows notifications for important tasks
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/widget/reminder.jsonManual
Run the following command
It will create a new file called reminder.tsx inside the components/animata/widget directory.
mkdir -p components/animata/widget && touch components/animata/widget/reminder.tsxPaste the code
Open the newly created file and paste the following code:
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
export default function Reminder({ className }: { className?: string }) {
return (
<div
className={cn(
"relative flex size-52 flex-col justify-between rounded-3xl border bg-background p-4 shadow-md dark:border-zinc-700",
className,
)}
>
<p className="text-center text-lg font-semibold text-foreground">Reminder</p>
<div className="flex items-center justify-between gap-x-3 p-2">
<div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-purple-200 p-4 text-3xl font-semibold dark:bg-purple-400">
2<p className="border-t border-background pt-2 text-center text-base font-normal">Work</p>
</div>
<div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-green-200 p-4 text-3xl font-semibold dark:bg-green-400">
3<p className="border-t border-background pt-2 text-center text-base font-normal">Home</p>
</div>
</div>
<div className="flex flex-row gap-1 text-muted-foreground">
<ArrowRight size={18} className="self-center" />
<p className="text-sm font-semibold">Meeting in 30 mins</p>
</div>
</div>
);
}Credits
Built by Laxmi Lamichhane