shadcn-ui

预期结果:

• Para agregar el componente button a tu proyecto shadcn/ui:
•  
• ```bash
• npx shadcn@latest add button
• ```
•  
• Esto instala el componente button y sus dependencias.
•  
• Uso básico:
•  
• ```tsx
• import { Button } from "@/components/ui/button"
•  
• export default function MyComponent() {
• return <Button>Haz clic en mí</Button>
• }
• ```

预期结果:

• Aquí tienes un formulario simple con validación de correo electrónico usando React Hook Form y Zod:
•  
• ```tsx
• import { useForm } from "react-hook-form"
• import { z } from "zod"
• import { zodResolver } from "@hookform/resolvers/zod"
• import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
• import { Input } from "@/components/ui/input"
• import { Button } from "@/components/ui/button"
•  
• const formSchema = z.object({
• email: z.string().email({ message: "Dirección de correo inválida" }),
• })
•  
• export function EmailForm() {
• const form = useForm({
• resolver: zodResolver(formSchema),
• defaultValues: { email: "" }
• })
•  
• function onSubmit(values) {
• console.log(values)
• }
•  
• return (
• <Form {...form}>
• <form onSubmit={form.handleSubmit(onSubmit)}>
• <FormField
• control={form.control}
• name="email"
• render={({ field }) => (
• <FormItem>
• <FormLabel>Correo</FormLabel>
• <FormControl><Input placeholder="tu@ejemplo.com" {...field} /></FormControl>
• <FormMessage />
• </FormItem>
• )}
• />
• <Button type="submit">Enviar</Button>
• </form>
• </Form>
• )
• }
• ```