shadcn/ui
Los componentes ya hechos
Reconoce
Nombra el componente
Estos son los componentes más comunes que Lovable mete en tus apps sin que te des cuenta. Identifícalos uno a uno.
Componente 1 de 5
¿Qué componente estás viendo?
1
Completa los imports
Añade los 3 imports que faltan buscando en la documentación de shadcn.
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>
)
}2
Monta la UI
Arrastra componentes shadcn a las zonas del wireframe.
Arrastra el componente correcto a cada slot del wireframe de la card de producto. En móvil, haz click en el slot y selecciona el componente.
Wireframe — Card de Producto
Imagen del producto
Arrastra aquíTítulo del producto
Arrastra aquíEtiqueta de precio
Arrastra aquíDescripción
Arrastra aquíBotón de compra
Arrastra aquíComponentes disponibles
<Button />
<Badge />
<CardTitle />
<CardDescription />
<AspectRatio />
<Separator />
<Avatar />
O selecciona componente para cada slot:
3
Ensambla formulario
Completa un formulario de contacto usando 5 componentes shadcn.
Completa el código del formulario usando: Label, Input, Textarea, Button y Select.
Recursos
Documentación y material de apoyo para este reto
Estado del reto