shadcn/ui Application

Build a [Application Type] using shadcn/ui components with full accessibility.

Requirements

1. Setup

• Initialize shadcn/ui in your Next.js/Vite project
• Configure Tailwind CSS
• Set up components directory structure

2. Components to Implement

Add and customize:

• [Component 1] - [Purpose] (e.g., Button for actions)
• [Component 2] - [Purpose] (e.g., Dialog for modals)
• [Component 3] - [Purpose] (e.g., Form for inputs)
• [Component 4] - [Purpose] (e.g., Table for data display)

3. Forms with Validation

Create forms using:

• react-hook-form for form management
• Zod schemas for validation
• shadcn/ui Form components
• Error display and loading states

4. Accessibility Requirements

Ensure:

• ARIA labels and roles
• Keyboard navigation
• Focus management
• Screen reader support
• Color contrast compliance

5. Theming

Implement:

• Light/dark mode toggle
• Custom color schemes
• CSS variables for theming
• Consistent spacing and typography

Example Implementation

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

const formSchema = z.object({
  [fieldName]: z.string().min(2),
  [fieldName2]: z.string().email()
})

export function [ComponentName]() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema)
  })

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>[Action]</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>[Title]</DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            {/* Form fields */}
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}

Best Practices

• Copy components to your project (not npm package)
• Customize styles to match brand
• Use command palette for quick component addition
• Leverage Radix UI primitives
• Keep components composable