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";
export default function ActionDemo() {
return (
<div className="flex flex-col items-start gap-4 w-3/4">
<Note action={<Button size="small">Upgrade</Button>}>
This note details some information.
</Note>
<Note action={<Button size="small">Upgrade</Button>}>
This note details a large amount information that could potentially wrap
into two or more lines, forcing the height of the Note to be larger.
</Note>
</div>
);
}