UI Components

VibeKit includes a full set of accessible, styled UI components in apps/web/modules/ui/components.

The look of these parts is defined in DESIGN.md in the repo root. Use its tokens. Do not invent styles on a page. Read UI & Design System for details.

Available components

Component	Description
`Button`	Primary, secondary, outline, ghost, and destructive buttons with loading state support.
`Card`	Content container with headers, descriptions, content body, and action footers.
`Dialog` & `AlertDialog`	Modal dialogs and confirmation prompts with accessible focus trapping.
`DropdownMenu`	Context and action menus with submenus, checkboxes, and radio items.
`Form`	Form wrapper integrating React Hook Form with Zod schema validation.
`Input` & `PasswordInput`	Text inputs and password inputs with toggleable visibility.
`Select`	Accessible dropdown selector with item grouping; it has no built-in search.
`Sheet`	Slide-out side drawer for mobile navigation and detailed panels.
`Table`	Data tables styled for dense metric dashboards and lists.
`Tabs`	Segmented tab navigation for switching dashboard views.
`Toast` & `Toaster`	Non-blocking notification toasts powered by Radix UI.

Example: Building a form

Combine react-hook-form, zod, and UI components:

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@ui/components/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@ui/components/form";
import { Input } from "@ui/components/input";

const schema = z.object({
  email: z.string().email(),
});

export function SubscribeForm() {
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { email: "" },
  });

  function onSubmit(values: z.infer<typeof schema>) {
    console.log("Submitting:", values);
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email Address</FormLabel>
              <FormControl>
                <Input placeholder="[email protected]" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Learn how to track events in Analytics & Logging.

UI Components

Available components

Example: Building a form

On this page