Components
Loading preview...
Display text that requires attention or provides additional information.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/noteimport { Button } from "@/components/ui/button-1";
import { Note } from "@/components/ui/note";
import Link from "next/link";
export default function CyanDemo() {
return (
<div className="flex flex-col items-start gap-4 w-3/4">
<Note type="cyan">This note details some cyan information.</Note>
<Note action={<Button size="small">Upgrade</Button>} type="cyan">
This note details some cyan information.
</Note>
<Note action={<Button size="small">Upgrade</Button>} type="cyan">
This note details some success information. Check{" "}
<Link data-zone="same" href="/geist#">
the documentation
</Link>{" "}
to learn more.
</Note>
<Note fill type="cyan">
This filled note details some cyan information.
</Note>
<Note action={<Button size="small">Upgrade</Button>} fill type="cyan">
This filled note details some cyan information.
</Note>
<Note action={<Button size="small">Upgrade</Button>} fill type="cyan">
This filled note details some success information. Check{" "}
<Link data-zone="same" href="/geist#">
the documentation
</Link>{" "}
to learn more.
</Note>
</div>
);
}