Components
Loading preview...
Provides supplementary text for form fields and other components.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-descriptionimport {
HeroUIStyles,
TextField,
TextFieldDescription,
TextFieldInput,
TextFieldLabel,
} from "@/components/ui/heroui-description";
export default function TextFieldDemo() {
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 />
<TextField type="email">
<TextFieldLabel>Email</TextFieldLabel>
<TextFieldInput placeholder="Enter your email" />
<TextFieldDescription>We'll never share your email</TextFieldDescription>
</TextField>
</div>
);
}
export { TextFieldDemo };