Docs
Notes
A notes widget
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/widget/notes.jsonManual
Run the following command
It will create a new file notes.tsx inside the components/animata/widget directory.
mkdir -p components/animata/widget && touch components/animata/widget/notes.tsxPaste the code
Open the newly created file and paste the following code:
export function NotesCard({ title, children }: { title?: string; children?: React.ReactNode }) {
return (
<div className="h-64 w-48 rounded-3xl border bg-[#fced99] p-4 font-sans text-zinc-950 shadow-sm">
<div className="text-lg font-bold tracking-wide">{title}</div>
<div className="mt-3 flex flex-col gap-3 text-sm">{children}</div>
</div>
);
}
export default function Notes() {
return (
<NotesCard title="About John">
<div>Has worked with ABC for last 10 years</div>
<div>Developed over 2 dozens of web apps</div>
<div>His latest work is live on stores</div>
<div>A cool guy</div>
</NotesCard>
);
}Credits
Built by sudha