shadcn/ui
Los componentes ya hechos
Este formulario de login está casi listo pero le faltan tres imports. Los componentes que usa (Input, Label, Checkbox) existen en shadcn/ui pero no están importados. Abre la documentación oficial en la tarjeta de Recursos de arriba, busca cada componente y añade las líneas de import que faltan.
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
// Aquí faltan 3 imports
export function FormularioLogin() {
return (
<Card>
<CardHeader>
<CardTitle>Accede a tu cuenta</CardTitle>
</CardHeader>
<CardContent>
<form className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="tu@email.com" />
</div>
<div>
<Label htmlFor="password">Contraseña</Label>
<Input id="password" type="password" />
</div>
<div className="flex items-center gap-2">
<Checkbox id="remember" />
<Label htmlFor="remember">Recuérdame</Label>
</div>
<Button className="w-full">Entrar</Button>
</form>
</CardContent>
</Card>
)
}Para cada situación elige el componente de shadcn más apropiado. Si dudas, la galería de componentes está enlazada en la tarjeta de Recursos de abajo.
Escribe el JSX de un formulario de contacto que incluya: un campo para el nombre, un campo para el email, un área de texto para el mensaje, un selector para el tipo de consulta (con 3 opciones: Comercial, Soporte, Otro) y un botón de enviar. Usa los componentes de shadcn correctos para cada elemento.
Necesitas Input, Textarea, Select (con sus sub-componentes), Button y Label. Todos los componentes y sus sub-partes están en la documentación oficial.