Components
Loading preview...
Provides supplementary text for form fields and other components.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-descriptionimport { Description, HeroUIStyles, Input, Label } from "@/components/ui/heroui-description";
export default function DefaultDemo() {
return (
<div className="heroui-description-scope flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8 text-foreground">
<HeroUIStyles />
<div className="heroui-description-field">
<Label htmlFor="email">Email</Label>
<Input
aria-describedby="email-description"
className="heroui-description-input-wide"
id="email"
placeholder="you@example.com"
type="email"
/>
<Description id="email-description">
We'll never share your email with anyone else.
</Description>
</div>
</div>
);
}
export { DefaultDemo };