Components
Loading preview...
Display text that requires attention or provides additional information.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/noteimport { Fragment } from "react";
import { Button } from "@/components/ui/button-1";
import { Note, TNoteType } from "@/components/ui/note";
const types: TNoteType[] = [
"secondary",
"tertiary",
"warning",
"success",
"default",
"alert",
"error",
"lite",
"ghost",
"alert",
"violet",
"cyan",
"rotate-ccw"
];
export default function LabelsDemo() {
return (
<div className="flex flex-col items-start gap-4 w-3/4 py-4">
<div className="flex flex-col gap-4">
<div className="font-bold dark:text-white">Default label</div>
{types.map((t) => (
<Fragment key={t}>
<Note type={t}>This is a note of type `{t}`.</Note>
<Note fill type={t}>
This is a fill note of type `{t}`.
</Note>
</Fragment>
))}
</div>
<div className="flex flex-col gap-4">
<div className="font-bold dark:text-white">Custom label</div>
{types.map((t) => (
<Fragment key={t}>
<Note label={t} type={t}>
This is a note of type `{t}`.
</Note>
<Note fill label={t} type={t}>
This is a fill note of type `{t}`.
</Note>
</Fragment>
))}
</div>
<div className="flex flex-col gap-4">
<div className="font-bold dark:text-white">No label</div>
{types.map((t) => (
<Fragment key={t}>
<Note label={false} type={t}>
This is a note of type `{t}`.
</Note>
<Note fill label={false} type={t}>
This is a fill note of type `{t}`.
</Note>
</Fragment>
))}
</div>
</div>
);
}