Code Patterns

This guide documents how to use Airy components consistently.

Component Usage

• Use composition over custom styling.
• Prefer variants and size props over adding new classes.
• Only add custom classes for layout or spacing.

Example button usage:

import { Button } from "@/components/ui/button";

<Button variant="default" size="lg">Continue</Button>

For icon usage, sizing, and reserved icon mappings, see the Iconography section in the visual-design guideline.

Forms (react-hook-form)

• Use Form, FormField, FormItem, FormLabel, and FormMessage.
• Validate with a schema library (zod is recommended).
• Keep labels and descriptions accessible.

Example structure:

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

Accessibility

• Every input must have a label.
• All interactive elements must be keyboard accessible.
• Preserve focus rings and aria-* attributes.
• Use sr-only for visual hiding, not display: none.

Naming Conventions

• Component names: PascalCase
• Props: camelCase
• Variants: kebab-case or semantic words (default, secondary, ghost)

Feedback and Errors

• Use sonner for toasts when a top-level action succeeds or fails.
• Inline errors should use FormMessage.