Components
Loading preview...
Flexible container component for grouping related content and actions.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-cardimport { Card } from "@/components/ui/heroui-card";
function Field({ label, type, placeholder }: { label: string; type: string; placeholder: string }) {
return (
<label className="flex flex-col gap-1 text-sm font-medium text-zinc-950 dark:text-zinc-50">
{label}
<input
className="h-10 rounded-xl border border-zinc-200 bg-zinc-50 px-3 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-blue-500 dark:border-white/10 dark:bg-white/5 dark:placeholder:text-zinc-500"
placeholder={placeholder}
type={type}
/>
</label>
);
}
export default function CardWithFormDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<Card className="w-full max-w-md">
<Card.Header>
<Card.Title>Login</Card.Title>
<Card.Description>Enter your credentials to access your account</Card.Description>
</Card.Header>
<form>
<Card.Content>
<div className="flex flex-col gap-4">
<Field label="Email" placeholder="email@example.com" type="email" />
<Field label="Password" placeholder="••••••••" type="password" />
</div>
</Card.Content>
<Card.Footer className="mt-4 flex flex-col gap-2">
<button className="w-full rounded-full bg-zinc-950 px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-zinc-950" type="submit">
Sign In
</button>
<a className="text-center text-sm font-medium text-blue-600 dark:text-blue-400" href="#">
Forgot password?
</a>
</Card.Footer>
</form>
</Card>
</div>
);
}
export { CardWithFormDemo };