UI Components¶

Last Updated: 2025-01-22

UI Components are built with shadcn/ui and Radix UI primitives, providing accessible, customizable components styled with Tailwind CSS.

Overview¶

AccessALI uses shadcn/ui components which are:

Not a library - Copy components into your codebase
Customizable - Full control over component code
Accessible - Built on Radix UI primitives
Styled - Tailwind CSS with design tokens
Type-safe - Full TypeScript support

Installation¶

# Add new component
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

Components are added to src/components/ui/.

Core Components¶

Button¶

import { Button } from '@/components/ui/button'

<Button>Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Card¶

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Dialog¶

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <p>Dialog content</p>
  </DialogContent>
</Dialog>

Form¶

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
import { useForm } from 'react-hook-form'

const form = useForm()

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      control={form.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input {...field} type="email" />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

Styling¶

Components use Tailwind CSS with design tokens defined in tailwind.config.ts:

colors: {
  primary: { DEFAULT: 'hsl(var(--primary))' },
  secondary: { DEFAULT: 'hsl(var(--secondary))' },
  destructive: { DEFAULT: 'hsl(var(--destructive))' },
}

Customize in src/app/globals.css:

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --secondary: 210 40% 96.1%;
  }
}

Accessibility¶

All components follow WAI-ARIA guidelines:

Keyboard navigation
Screen reader support
Focus management
ARIA attributes