### Install Project Dependencies

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Run this command after cloning the repository to install all necessary npm packages.

```bash
npm install
```

--------------------------------

### Development Commands

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

Commands to start the development server or build the project for production.

```bash
# Development
npm run dev               # Start Vite development server (http://localhost:5173)
npm run build            # Build for production (TypeScript compilation + Vite build)
```

--------------------------------

### Start Development Server

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Launches the development server for local development. The application will be available at http://localhost:5173.

```bash
npm run dev
# Opens on http://localhost:5173
```

--------------------------------

### Primary Button Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

A basic example of rendering a primary button. This is the default button style.

```typescript
// Primary button
<Button>Save</Button>
```

--------------------------------

### Environment Variables Configuration

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Example of setting environment variables in .env files for different environments (development, production).

```bash
# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=Untitled UI

# .env.development
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.prod.example.com
```

--------------------------------

### Run Development Server

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/README.md

Commands to start the development server for the Vite project. Open http://localhost:5173 to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Example Usage of Integration Icons

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Render Slack and GitHub icons with a specified size using the imported components.

```typescript
import { SlackIcon, GithubIcon } from "@/components/foundations/integration-icons";

export function IntegrationIconsExample() {
  return (
    <div className="flex gap-4">
      <SlackIcon className="size-8" />
      <GithubIcon className="size-8" />
    </div>
  );
}
```

--------------------------------

### Basic Button Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

Renders a standard button with medium size.

```typescript
<Button size="md">Save</Button>
```

--------------------------------

### TypeScript Path Alias Import Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Example of how to import components using the '@/ ' path alias, which is configured in tsconfig.json.

```typescript
import { Button } from "@/components/base/buttons/button";
```

--------------------------------

### DateRangePicker Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Example of how to use the DateRangePicker component with state management for selected date ranges.

```typescript
import { DateRangePicker } from "@/components/application/date-picker/date-range-picker";
import { useState } from "react";

export function DateRangePickerExample() {
  const [range, setRange] = useState({
    start: parseDate("2024-07-01"),
    end: parseDate("2024-07-08"),
  });

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      onApply={() => console.log("Applied range:", range)}
    />
  );
}
```

--------------------------------

### Responsive Utility Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Demonstrates how to apply different styles based on screen breakpoints using Tailwind's responsive prefixes. Use `md:` for the primary breakpoint.

```typescript
<div className="flex flex-col md:flex-row lg:gap-6 gap-4">
  <div className="w-full md:w-1/2 lg:w-1/3" />
</div>
```

--------------------------------

### Theme Provider Setup

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Shows how to set up the ThemeProvider for automatic light/dark mode switching via CSS variables. Ensure this is wrapped around your application's root.

```typescript
import { ThemeProvider, useTheme } from "@/providers/theme-provider";

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      {/* Your app */}
    </ThemeProvider>
  );
}
```

--------------------------------

### Tooltip Component Usage Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates how to use the Tooltip component with different placements and triggers, including basic buttons and icons.

```typescript
import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
import { HelpCircle } from "@untitledui/icons";

export function TooltipExamples() {
  return (
    <>
      {/* Basic tooltip */}
      <Tooltip title="Click to save" placement="top">
        <button>Save</button>
      </Tooltip>

      {/* Tooltip on icon */}
      <Tooltip title="Help information" placement="right">
        <TooltipTrigger>
          <HelpCircle className="size-4 cursor-help" />
        </TooltipTrigger>
      </Tooltip>

      {/* Tooltip with different placement */}
      <Tooltip title="User settings" placement="bottom">
        <button>Settings</button>
      </Tooltip>
    </>
  );
}
```

--------------------------------

### Table Component Example Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates how to use the Table component with sample columns and data. Includes enabling selection and sorting, and logging sort changes.

```typescript
import { Table } from "@/components/application/table/table";

const columns = [
  { key: "name", label: "Name", sortable: true },
  { key: "email", label: "Email" },
  { key: "role", label: "Role", sortable: true },
  { key: "status", label: "Status" },
];

const data = [
  { id: 1, name: "Olivia Rhye", email: "olivia@untitledui.com", role: "Admin", status: "Active" },
  { id: 2, name: "Phoenix Baker", email: "phoenix@untitledui.com", role: "User", status: "Active" },
];

export function TableExample() {
  return (
    <Table
      columns={columns}
      data={data}
      selectable
      sortable
      onSort={(column, direction) => console.log(`Sort ${column} ${direction}`)}
    />
  );
}
```

--------------------------------

### Example Usage of Logo Component

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Demonstrates how to use the Logo component within a header, specifying size and variant.

```typescript
import { Logo } from "@/components/foundations/logo";

export function HeaderExample() {
  return (
    <header className="flex items-center justify-between p-4">
      <Logo size="md" variant="full" />
      {/* Navigation */}
    </header>
  );
}
```

--------------------------------

### FeaturedIcon Examples

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Demonstrates various ways to use the FeaturedIcon component with different themes, colors, and sizes. Ensure necessary icon components are imported.

```typescript
import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
import { CheckCircle, AlertCircle, XCircle, Info } from "@untitledui/icons";

export function FeaturedIconExamples() {
  return (
    <>
      {/* Light theme (default) */}
      <FeaturedIcon icon={CheckCircle} color="success" theme="light" size="lg" />

      {/* Gradient theme */}
      <FeaturedIcon icon={AlertCircle} color="warning" theme="gradient" size="xl" />

      {/* Dark theme */}
      <FeaturedIcon icon={XCircle} color="error" theme="dark" size="md" />

      {/* Outline theme */}
      <FeaturedIcon icon={Info} color="brand" theme="outline" size="lg" />

      {/* Modern styles (gray only) */}
      <FeaturedIcon icon={Settings} color="gray" theme="modern" size="lg" />
      <FeaturedIcon icon={Settings} color="gray" theme="modern-neue" size="lg" />

      {/* Different color combinations */}
      <FeaturedIcon icon={User} color="brand" theme="light" />
      <FeaturedIcon icon={User} color="error" theme="dark" />
      <FeaturedIcon icon={User} color="success" theme="gradient" />
    </>
  );
}
```

--------------------------------

### Input Component Examples

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various configurations of the Input component, including basic usage, with icons, validation, required fields, different sizes, tooltips, and disabled states. Ensure necessary icons are imported if used.

```typescript
import { Input } from "@/components/base/input/input";
import { Mail01, Lock01, Eye, EyeOff } from "@untitledui/icons";
import { useState } from "react";

export function InputExamples() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <>
      {/* Basic input * /}
      <Input
        label="Full Name"
        placeholder="Enter your name"
      />

      {/* With icon * /}
      <Input
        icon={Mail01}
        label="Email"
        type="email"
        placeholder="olivia@untitledui.com"
        value={email}
        onChange={setEmail}
      />

      {/* With validation * /}
      <Input
        label="Email"
        isInvalid={email && !email.includes("@")}
        hint={email && !email.includes("@") ? "Please enter a valid email" : ""}
      />

      {/* Required field * /
      <Input
        label="Password"
        type="password"
        isRequired
        hint="Minimum 8 characters"
      />

      {/* Large size with tooltip * /
      <Input
        size="lg"
        label="Website"
        placeholder="www.example.com"
        tooltip="Enter your website URL"
      />

      {/* Disabled state * /
      <Input
        label="Disabled"
        isDisabled
        value="Cannot edit"
      />
    </>
  );
}
```

--------------------------------

### File Upload Component Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates how to use the FileUpload component with specified accepted file types, multiple file selection enabled, a maximum file size, and a handler for selected files.

```typescript
import { FileUpload } from "@/components/application/file-upload/file-upload-base";

export function FileUploadExample() {
  const handleFileSelect = (files: File[]) => {
    files.forEach(file => {
      console.log(`Uploading: ${file.name} (${file.size} bytes)`);
    });
  };

  return (
    <FileUpload
      accept={["image/png", "image/jpeg", "application/pdf"]}
      multiple
      maxSize={5242880} // 5MB
      onFilesSelected={handleFileSelect}
    />
  );
}
```

--------------------------------

### Vercel Deployment Configuration

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Example Vercel configuration file specifying the build command, output directory, and environment variables. The VITE_API_URL is set using a Vercel variable.

```json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "env": {
    "VITE_API_URL": "@vite_api_url"
  }
}
```

--------------------------------

### Badge Component Example Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various ways to use the Badge, BadgeWithDot, and BadgeWithIcon components, including different types, sizes, colors, and icon placements.

```typescript
import { Badge, BadgeWithDot, BadgeWithIcon } from "@/components/base/badges/badges";
import { ArrowUp, Zap } from "@untitledui/icons";

export function BadgeExamples() {
  return (
    <>
      {/* Basic badge */}
      <Badge color="brand" size="md">New</Badge>

      {/* Pill style (rounded) */}
      <Badge type="pill-color" color="success" size="md">Active</Badge>

      {/* Badge with dot indicator */}
      <BadgeWithDot color="success" type="pill-color">
        Online
      </BadgeWithDot>

      {/* Badge with icon */}
      <BadgeWithIcon iconLeading={ArrowUp} color="success">
        12%
      </BadgeWithIcon>

      {/* Different color variants */}
      <Badge color="error">Error</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="purple">Custom</Badge>

      {/* Large badge */}
      <Badge size="lg" color="brand">Featured</Badge>
    </>
  );
}
```

--------------------------------

### Modal Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates the usage of the Modal component, including a trigger button and dialog content with action buttons.

```typescript
import { ModalOverlay, Modal, Dialog, DialogTrigger } from "@/components/application/modals/modal";
import { Button } from "@/components/base/buttons/button";

export function ModalExample() {
  return (
    <DialogTrigger>
      <Button>Open Modal</Button>

      <ModalOverlay>
        <Modal>
          <Dialog>
            {({ close }) => (
              <div className="bg-primary rounded-2xl p-6 max-w-md w-full">
                <h2 className="text-lg font-semibold mb-4">Confirm Action</h2>
                <p className="text-tertiary mb-6">
                  Are you sure you want to proceed?
                </p>
                <div className="flex gap-3 justify-end">
                  <Button color="secondary" onClick={close}>
                    Cancel
                  </Button>
                  <Button color="primary" onClick={() => { /* action */ close(); }}>
                    Confirm
                  </Button>
                </div>
              </div>
            )}
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  );
}
```

--------------------------------

### Radio Button Example Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates basic usage, horizontal layout, and disabled options for the RadioButtons component.

```typescript
import { RadioButtons } from "@/components/base/radio-buttons/radio-buttons";
import { useState } from "react";

export function RadioButtonExamples() {
  const [selected, setSelected] = useState("monthly");

  const pricingPlans = [
    { id: "monthly", label: "Monthly", hint: "Billed monthly" },
    { id: "yearly", label: "Yearly", hint: "Billed annually (20% off)" },
  ];

  return (
    <>
      {/* Basic radio button group */}
      <RadioButtons
        items={pricingPlans}
        selectedKey={selected}
        onSelectionChange={setSelected}
      />

      {/* Horizontal layout */}
      <RadioButtons
        items={pricingPlans}
        orientation="horizontal"
        selectedKey={selected}
        onSelectionChange={setSelected}
      />

      {/* With disabled option */}
      <RadioButtons
        items={[
          { id: "free", label: "Free" },
          { id: "pro", label: "Pro" },
          { id: "enterprise", label: "Enterprise", isDisabled: true },
        ]}
        selectedKey={selected}
        onSelectionChange={setSelected}
      />
    </>
  );
}
```

--------------------------------

### Example Usage of Payment Icons

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Display Visa, Mastercard, and Apple Pay icons with a size of 8 units.

```typescript
import { VisaIcon, MastercardIcon, ApplePayIcon } from "@/components/foundations/payment-icons";

export function PaymentMethodsExample() {
  return (
    <div className="flex gap-4">
      <VisaIcon className="size-8" />
      <MastercardIcon className="size-8" />
      <ApplePayIcon className="size-8" />
    </div>
  );
}
```

--------------------------------

### Loading Indicator Component Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Shows how to implement the LoadingIndicator component with a large size and an accessibility label for 'Loading data...'.

```typescript
import { LoadingIndicator } from "@/components/application/loading-indicator/loading-indicator";

export function LoadingExample() {
  return <LoadingIndicator size="lg" label="Loading data..." />;
}
```

--------------------------------

### Toggle Component Example Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various ways to use the Toggle component, including basic toggles, toggles with labels and hints, and disabled toggles.

```typescript
import { Toggle } from "@/components/base/toggle/toggle";
import { useState } from "react";

export function ToggleExamples() {
  const [darkMode, setDarkMode] = useState(false);
  const [notifications, setNotifications] = useState(true);

  return (
    <>
      {/* Basic toggle */}
      <Toggle
        isSelected={darkMode}
        onChange={setDarkMode}
      />

      {/* Toggle with label */}
      <Toggle
        label="Dark mode"
        isSelected={darkMode}
        onChange={setDarkMode}
      />

      {/* Toggle with label and hint */}
      <Toggle
        label="Email notifications"
        hint="Receive emails about account activity"
        isSelected={notifications}
        onChange={setNotifications}
      />

      {/* Disabled toggle */}
      <Toggle label="Feature unavailable" isDisabled />
    </>
  );
}
```

--------------------------------

### Example Usage of RatingStars

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Demonstrates how to use the RatingStars component for both static display and interactive rating.

```typescript
import { RatingStars } from "@/components/foundations/rating-stars";
import { useState } from "react";

export function RatingStarsExample() {
  const [rating, setRating] = useState(4);

  return (
    <>
      {/* Display only */}
      <RatingStars rating={4.5} size="lg" />

      {/* Interactive rating */}
      <RatingStars
        rating={rating}
        onChange={setRating}
        interactive
        size="md"
      />
    </>
  );
}
```

--------------------------------

### Button Examples

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various ways to use the Button component, including different sizes, colors, icons, loading and disabled states, and link variants. Ensure necessary icons and React Router types are imported if using link-specific features.

```typescript
import { Button } from "@/components/base/buttons/button";
import { Save, Trash02 } from "@/components/icons";

export function ButtonExamples() {
  return (
    <>
      {/* Basic button */}
      <Button>Save</Button>

      {/* With leading icon */}
      <Button iconLeading={Save} color="primary">
        Save Changes
      </Button>

      {/* Loading state */}
      <Button isLoading showTextWhileLoading>
        Submitting...
      </Button>

      {/* Destructive action */}
      <Button color="primary-destructive" iconLeading={Trash02}>
        Delete
      </Button>

      {/* Disabled state */}
      <Button isDisabled>Disabled</Button>

      {/* As link */}
      <Button href="/dashboard" color="link-color">
        Go to Dashboard
      </Button>

      {/* Icon only */}
      <Button iconLeading={Save} />
    </>
  );
}
```

--------------------------------

### Example Usage of Dot Icon

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Shows how to integrate the Dot component into a React application to visually represent status. Customize its color and size as needed.

```typescript
import { Dot } from "@/components/foundations/dot-icon";

export function DotIconExample() {
  return (
    <div className="flex items-center gap-2">
      <Dot color="success" />
      <span>Status: Active</span>
    </div>
  );
}
```

--------------------------------

### Example Usage of PlayButtonIcon

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Demonstrates how to use the PlayButtonIcon component within a React component. It's typically used to overlay a video thumbnail.

```typescript
import { PlayButtonIcon } from "@/components/foundations/play-button-icon";

export function PlayButtonExample() {
  return (
    <div className="relative">
      <img src="video-thumbnail.jpg" alt="Video" />
      <PlayButtonIcon
        size="lg"
        onClick={() => console.log("Play video")}
      />
    </div>
  );
}
```

--------------------------------

### Responsive Text Sizing

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Implement responsive text sizing to ensure readability across different screen sizes. This example scales text from small on extra-small screens to base on medium and large on extra-large screens.

```typescript
"text-sm md:text-base lg:text-lg"
```

--------------------------------

### Example Usage of Social Media Icons

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Render Twitter, LinkedIn, and Facebook icons with specified sizes and hover effects, linked to their respective platforms.

```typescript
import { TwitterIcon, LinkedInIcon, FacebookIcon } from "@/components/foundations/social-icons";

export function SocialLinksExample() {
  return (
    <div className="flex gap-3">
      <a href="https://twitter.com">
        <TwitterIcon className="size-5 hover:text-blue-400" />
      </a>
      <a href="https://linkedin.com">
        <LinkedInIcon className="size-5 hover:text-blue-600" />
      </a>
      <a href="https://facebook.com">
        <FacebookIcon className="size-5 hover:text-blue-500" />
      </a>
    </div>
  );
}
```

--------------------------------

### TypeScript Countries Usage Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/api-reference.md

Demonstrates how to import and use the `countries` constant to populate a Select component with country options.

```typescript
import { countries } from "@/utils/countries";

<Select>
  {countries.map((country) => (
    <Select.Item key={country.code} id={country.code}>
      {country.flag} {country.name}
    </Select.Item>
  ))}
</Select>
```

--------------------------------

### Checkbox Component Example Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various ways to use the Checkbox component, including basic usage, with hints, different sizes, disabled states, and indeterminate states.

```typescript
import { Checkbox } from "@/components/base/checkbox/checkbox";
import { useState } from "react";

export function CheckboxExamples() {
  const [agreed, setAgreed] = useState(false);
  const [notifications, setNotifications] = useState(false);

  return (
    <>
      {/* Basic checkbox */}
      <Checkbox label="Remember me" />

      {/* With hint text */}
      <Checkbox
        label="Remember me"
        hint="Save my login details for next time"
        isSelected={agreed}
        onChange={setAgreed}
      />

      {/* Large size */}
      <Checkbox
        size="md"
        label="I agree to the terms and conditions"
        isSelected={agreed}
        onChange={setAgreed}
      />

      {/* Disabled state */}
      <Checkbox label="Unavailable option" isDisabled />

      {/* Indeterminate state (for "select all" patterns) */}
      <Checkbox
        label="Select all"
        isIndeterminate={notifications}
      />
    </>
  );
}
```

--------------------------------

### Pagination Component Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates how to use the PaginationPageDefault component to manage page navigation. It requires setting the current page, total pages, and a callback for page changes. The 'rounded' prop can be used for styling.

```typescript
import { PaginationPageDefault } from "@/components/application/pagination/pagination";
import { useState } from "react";

export function PaginationExample() {
  const [page, setPage] = useState(1);
  const totalPages = 10;

  return (
    <>
      {/* Your page content here */}
      <div className="mb-8">
        {/* Data items for page {page} */}
      </div>

      <PaginationPageDefault
        page={page}
        total={totalPages}
        onPageChange={setPage}
        rounded
      />
    </>
  );
}
```

--------------------------------

### Example Usage of DatePicker Component

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates how to use the DatePicker component with state management for selected dates and event handlers for apply and cancel actions. Ensure to import necessary functions like parseDate and useState.

```typescript
import { DatePicker } from "@/components/application/date-picker/date-picker";
import { parseDate } from "@internationalized/date";
import { useState } from "react";

export function DatePickerExample() {
  const [date, setDate] = useState(parseDate("2024-07-08"));

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      onApply={() => console.log("Applied date:", date)}
      onCancel={() => console.log("Cancelled")}
    />
  );
}
```

--------------------------------

### Example Usage of SidebarSimple Component

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Demonstrates how to use the SidebarSimple component within an application layout. It requires an array of items with IDs, labels, and icons, and handles selection events.

```typescript
import { SidebarSimple } from "@/components/application/app-navigation/sidebar-navigation/sidebar-simple";
import { Home01, Settings01, Users } from "@untitledui/icons";

export function AppLayout() {
  return (
    <div className="flex">
      <SidebarSimple
        items={[
          { id: "home", label: "Home", icon: Home01 },
          { id: "team", label: "Team", icon: Users },
          { id: "settings", label: "Settings", icon: Settings01 },
        ]}
        selectedId="home"
        onSelect={(id) => console.log("Selected:", id)}
      />
      
      <main className="flex-1">
        {/* Page content */}
      </main>
    </div>
  );
}
```

--------------------------------

### Avatar Component Usage Examples

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates various ways to use the Avatar component, including image sources, fallback initials, icon fallbacks, status indicators, and verification badges.

```typescript
import { Avatar, AvatarLabelGroup } from "@/components/base/avatar/avatar";
import { User01 } from "@untitledui/icons";

export function AvatarExamples() {
  return (
    <>
      {/* Basic avatar with image */}
      <Avatar src="/avatars/olivia.jpg" alt="Olivia Rhye" size="md" />

      {/* Avatar with fallback initials */}
      <Avatar initials="OR" size="lg" />

      {/* Avatar with icon fallback */}
      <Avatar icon={User01} size="md" />

      {/* Avatar with status indicator */}
      <Avatar src="/avatars/olivia.jpg" status="online" />

      {/* Avatar with verification badge */}
      <Avatar src="/avatars/olivia.jpg" verified />

      {/* Avatar label group (avatar with name and email) */}
      <AvatarLabelGroup
        src="/avatars/olivia.jpg"
        title="Olivia Rhye"
        subtitle="olivia@untitledui.com"
        size="md"
      />

      {/* Avatar label group with initials fallback */}
      <AvatarLabelGroup
        initials="PR"
        title="Phoenix Baker"
        subtitle="phoenix@untitledui.com"
      />
    </>
  );
}
```

--------------------------------

### Basic Single Select Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates a basic single selection dropdown with a label and placeholder. The `items` prop is an array of objects, and the children prop is a render function for each item.

```typescript
import { Select } from "@/components/base/select/select";
import { MultiSelect } from "@/components/base/select/multi-select";
import { User01, Mail01 } from "@untitledui/icons";

const users = [
  { id: "1", name: "Olivia Rhye", email: "olivia@untitledui.com", avatar: "/avatars/olivia.jpg" },
  { id: "2", name: "Phoenix Baker", email: "phoenix@untitledui.com", avatar: "/avatars/phoenix.jpg" },
];

export function SelectExamples() {
  return (
    <>
      {/* Basic single select */}
      <Select label="Team member" placeholder="Select a member" items={users}>
        {(user) => (
          <Select.Item id={user.id} supportingText={user.email}>
            {user.name}
          </Select.Item>
        )}
      </Select>

      {/* Select with avatar */}
      <Select items={users} icon={User01}>
        {(user) => (
          <Select.Item avatarUrl={user.avatar} supportingText={user.email}>
            {user.name}
          </Select.Item>
        )}
      </Select>

      {/* ComboBox (searchable select) */}
      <Select.ComboBox label="Search user" placeholder="Type to search...">
        {(user) => (
          <Select.Item id={user.id} supportingText={user.email}>
            {user.name}
          </Select.Item>
        )}
      </Select.ComboBox>

      {/* Multi-select */}
      <MultiSelect label="Team members" placeholder="Select multiple">
        {(user) => (
          <MultiSelect.Item id={user.id} supportingText={user.email}>
            {user.name}
          </MultiSelect.Item>
        )}
      </MultiSelect>
    </>
  );
}
```

--------------------------------

### Vite Configuration with React Plugin

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Configures Vite for a React project, enabling the React plugin, setting the development server port, and defining path aliases. This setup is crucial for local development and building the application.

```typescript
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    strictPort: false
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
```

--------------------------------

### Example Brand Color Scale

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

Defines a complete color scale for the brand, from lightest to darkest shades, to be used across the application. Ensure proper contrast ratios are maintained.

```css
--color-brand-25: rgb(252 250 255); /* Lightest tint */
--color-brand-50: rgb(249 245 255);
--color-brand-100: rgb(244 235 255);
--color-brand-200: rgb(233 215 254);
--color-brand-300: rgb(214 187 251);
--color-brand-400: rgb(182 146 246);
--color-brand-500: rgb(158 119 237); /* Base brand color */
--color-brand-600: rgb(127 86 217); /* Primary interactive color */
--color-brand-700: rgb(105 65 198);
--color-brand-800: rgb(83 56 158);
--color-brand-900: rgb(66 48 125);
--color-brand-950: rgb(44 28 95); /* Darkest shade */
```

--------------------------------

### Preview Production Build

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Serves the production build locally for previewing before deployment.

```bash
npm run preview
```

--------------------------------

### Tabs Component Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Shows how to implement a tabbed interface using the Tabs component. Each tab requires a unique ID, a label, and content. Optional properties include an icon, badge, and a handler for tab selection changes. The 'orientation' prop can switch between horizontal and vertical layouts.

```typescript
import { Tabs } from "@/components/application/tabs/tabs";
import { Users, Settings, FileText } from "@untitledui/icons";
import { useState } from "react";

export function TabsExample() {
  const [selectedTab, setSelectedTab] = useState("overview");

  const tabs = [
    {
      id: "overview",
      label: "Overview",
      icon: FileText,
      content: <div>Overview content here</div>,
    },
    {
      id: "team",
      label: "Team",
      icon: Users,
      badge: 5,
      content: <div>Team members list</div>,
    },
    {
      id: "settings",
      label: "Settings",
      icon: Settings,
      content: <div>Settings form</div>,
    },
  ];

  return (
    <Tabs
      items={tabs}
      selectedKey={selectedTab}
      onSelectionChange={setSelectedTab}
    />
  );
}
```

--------------------------------

### Create Component Test File

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Shows the recommended location for creating test files, alongside their corresponding component files.

```bash
src/components/base/button/button.test.tsx
```

--------------------------------

### Example of Tailwind CSS Animated Content

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Apply Tailwind CSS animation utilities to elements for animated effects. This example demonstrates a fade-in and slide-in animation with a specified duration.

```typescript
<div className="animate-in fade-in slide-in-from-top-2 duration-300">
  Animated content
</div>
```

--------------------------------

### Project Structure Overview

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Illustrates the directory layout of the Untitledui Vite Starter Kit, showing the organization of source files, components, utilities, and static assets.

```tree
untitledui-vite-starter-kit/
├── src/
│   ├── components/           # Component library
│   │   ├── base/            # Core UI components
│   │   ├── application/     # Complex patterns
│   │   ├── foundations/     # Design tokens
│   │   └── shared-assets/   # Shared assets
│   ├── hooks/               # Custom React hooks
│   ├── providers/           # Context providers
│   ├── utils/               # Utility functions
│   ├── styles/              # Global styles
│   ├── types/               # TypeScript types
│   ├── pages/               # Route components
│   ├── main.tsx             # App entry point
│   └── App.tsx              # Root component
├── public/                  # Static assets
├── dist/                    # Production build (generated)
├── index.html              # HTML template
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
```

--------------------------------

### Basic Checkbox

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

A simple checkbox with a label. No special setup required.

```typescript
import { Checkbox } from "@/components/base/checkbox/checkbox";

// Basic checkbox
<Checkbox label="Remember me" />
```

--------------------------------

### Create Production Build

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Generates an optimized production-ready bundle for deployment. The output will be placed in the dist/ directory.

```bash
npm run build
# Creates optimized bundle in dist/
```

--------------------------------

### Example Usage of RatingBadge

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/foundations.md

Showcases the RatingBadge component with different variants, sizes, and counts.

```typescript
import { RatingBadge } from "@/components/foundations/rating-badge";

export function RatingBadgeExample() {
  return (
    <>
      {/* Filled variant */}
      <RatingBadge rating={4.5} count={128} size="md" />

      {/* Outlined variant */}
      <RatingBadge rating={4.0} count={89} variant="outlined" />

      {/* Large badge */}
      <RatingBadge rating={4.8} count={1203} size="lg" />
    </>
  );
}
```

--------------------------------

### TypeScript Timezones Usage Example

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/api-reference.md

Shows how to import and use the `timezones` constant with a Select component for timezone selection.

```typescript
import { timezones } from "@/utils/timezones";

<Select items={timezones}>
  {(tz) => (
    <Select.Item id={tz.value}>
      {tz.label} ({tz.abbreviation})
    </Select.Item>
  )}
</Select>
```

--------------------------------

### TypeScript Application Entry Point Configuration

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/api-reference.md

Configures the main application entry point, setting up essential providers like ThemeProvider and RouteProvider within a BrowserRouter.

```typescript
import { ThemeProvider } from "@/providers/theme-provider";
import { RouteProvider } from "@/providers/router-provider";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider>
      <BrowserRouter>
        <RouteProvider>
          {/* Your routes */}
        </RouteProvider>
      </BrowserRouter>
    </ThemeProvider>
  </StrictMode>,
);
```

--------------------------------

### Recommended Import Organization

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/component-exports.md

Demonstrates the recommended order for organizing imports, including external libraries, components, utilities, types, and styles.

```typescript
// External
import { useState } from "react";
import { useNavigate } from "react-router";

// Components
import { Button } from "@/components/base/buttons/button";
import { Input } from "@/components/base/input/input";
import { Modal, ModalOverlay, Dialog, DialogTrigger } from "@/components/application/modals/modal";

// Utilities & Hooks
import { cx } from "@/utils/cx";
import { useBreakpoint } from "@/hooks/use-breakpoint";

// Types & Constants
import type { ButtonProps } from "@/components/base/buttons/button";

// Styles
import "@/styles/globals.css";
```

--------------------------------

### Recommended Icon Import

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Demonstrates the recommended way to import icons using named imports for better tree-shaking and optimized bundle size.

```typescript
// ✅ Optimal (1,100 icons available)
import { Home01, Settings01 } from "@untitledui/icons";

// ❌ Avoid (imports entire icon library)
import * as Icons from "@untitledui/icons";
```

--------------------------------

### Importing PRO Icon Styles

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

Illustrates how to import icons from the PRO package and its different style variants like duocolor, duotone, and solid.

```typescript
import { Home01 } from "@untitledui-pro/icons";
// Line
import { Home01 } from "@untitledui-pro/icons/duocolor";
import { Home01 } from "@untitledui-pro/icons/duotone";
import { Home01 } from "@untitledui-pro/icons/solid";
```

--------------------------------

### Enable Debug Logs

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Run your development server with debug logs enabled by prepending the DEBUG environment variable.

```bash
DEBUG=* npm run dev
```

--------------------------------

### Analyze Bundle Size

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Run this command to analyze the size of your application's build output. This helps in identifying large dependencies or code.

```bash
npm run build -- --analyze
```

--------------------------------

### Create New Component File

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Specifies the file path convention for creating new components within the 'base' category of the component library.

```bash
src/components/base/[component-name]/[component-name].tsx
```

--------------------------------

### Manage Theme with ThemeProvider

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Wrap your application with `ThemeProvider` to manage theme settings. Use the `useTheme` hook to access and switch between themes like 'system', 'dark', and 'light'.

```typescript
import { ThemeProvider, useTheme } from "@/providers/theme-provider";

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  );
}

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme
    </button>
  );
}
```

--------------------------------

### Tailwind CSS Utility Class

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Example of using Tailwind CSS utility classes for styling elements. This approach leverages a utility-first framework with custom design tokens.

```typescript
className="flex items-center gap-4 px-6 py-4 bg-primary rounded-lg shadow-xs"
```

--------------------------------

### Organizing Component Styles with sortCx

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Illustrates how to organize component styles using style objects with the `sortCx` utility. This includes common styles, size variants, and color variants.

```typescript
const styles = sortCx({
  common: { root: "..." },
  sizes: { sm: { root: "..." }, md: { root: "..." } },
  colors: { primary: { root: "..." } },
});
```

--------------------------------

### CSS Border Utilities

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Demonstrates how to apply border, ring, stroke, and fill styles using CSS utility classes. Ensure the appropriate border token is selected for the desired contrast and context.

```css
/* Border */
border-2 border-primary

/* Ring (outline) */
ring-2 ring-brand ring-inset

/* Stroke (SVG) */
stroke-current text-brand-solid

/* Fill */
fill-current text-error-primary
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Demonstrates the basic usage of the Textarea component with a label, placeholder, and state management.

```typescript
import { Textarea } from "@/components/base/textarea/textarea";
import { useState } from "react";

export function TextareaExamples() {
  const [message, setMessage] = useState("");

  return (
    <>
      {/* Basic textarea */}
      <Textarea
        label="Message"
        placeholder="Type your message here..."
        value={message}
        onChange={setMessage}
      />
    </>
  );
}
```

--------------------------------

### ThemeProvider

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/api-reference.md

Manages the application's theme (light, dark, system) with persistence using localStorage. It allows for customization of the dark mode class, default theme, and storage key.

```APIDOC
## ThemeProvider

### Description
Manages light/dark/system theme with localStorage persistence.

### Props
#### `children` (ReactNode) - Required - The child elements to be rendered within the provider.
#### `darkModeClass` (string) - Optional - The CSS class to apply when dark mode is enabled. Defaults to "dark-mode".
#### `defaultTheme` ("light" | "dark" | "system") - Optional - The default theme to apply. Defaults to "system".
#### `storageKey` (string) - Optional - The key used for storing the theme preference in localStorage. Defaults to "ui-theme".

### Hook: `useTheme()`
Returns the current theme and a function to set the theme.

#### `theme` ("light" | "dark" | "system") - The current active theme.
#### `setTheme` (theme: "light" | "dark" | "system") => void - Function to update the current theme.

### Example
```typescript
import { ThemeProvider, useTheme } from "@/providers/theme-provider";

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  );
}

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme
    </button>
  );
}
```
```

--------------------------------

### Run Project Tests

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Command to execute all defined tests within the project using npm.

```bash
npm run test
```

--------------------------------

### DateRangePicker

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

A component for selecting a range of dates, including start and end dates. It provides props for managing the selected range, handling user interactions like applying or canceling, and controlling the size and selectable date limits.

```APIDOC
## DateRangePicker

### Description
A component for selecting a range of dates, including start and end dates. It provides props for managing the selected range, handling user interactions like applying or canceling, and controlling the size and selectable date limits.

### Props
- **value** (`DateRange`) - Currently selected range
- **onChange** (`(range: DateRange) => void`) - Called when range changes
- **onApply** (`() => void`) - Called when Apply clicked
- **onCancel** (`() => void`) - Called when Cancel clicked
- **size** (`"xs" | "sm" | "md" | "lg" | "xl"`) - Trigger button size (Default: `"sm"`)
- **minValue** (`DateValue`) - Minimum selectable date
- **maxValue** (`DateValue`) - Maximum selectable date

### Example Usage
```typescript
import { DateRangePicker } from "@/components/application/date-picker/date-range-picker";
import { useState } from "react";

export function DateRangePickerExample() {
  const [range, setRange] = useState({
    start: parseDate("2024-07-01"),
    end: parseDate("2024-07-08"),
  });

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      onApply={() => console.log("Applied range:", range)}
    />
  );
}
```
```

--------------------------------

### Environment-Specific Builds

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/configuration.md

Demonstrates how Vite automatically loads environment variables from .env files. The 'build' command uses .env and .env.production, while 'dev' uses .env and .env.development.

```bash
# Uses .env and .env.production
npm run build

# Uses .env and .env.development
npm run dev
```

--------------------------------

### Mobile-First Styling Convention

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/styling-guide.md

Illustrates the correct mobile-first approach for applying responsive grid classes. Always define mobile styles first, then override for larger breakpoints.

```typescript
// ✅ Correct: Mobile default, then desktop
className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
```

```typescript
// ❌ Wrong: Desktop first (doesn't scale down)
className="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1"
```

--------------------------------

### Dropdown Menu Component Usage

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/base-components.md

Shows how to implement the Dropdown component with various items including dividers and actions. Requires importing Dropdown and icons from @untitledui/icons.

```typescript
import { Dropdown } from "@/components/base/dropdown/dropdown";
import { Settings01, Edit, Trash02, LogOut } from "@untitledui/icons";

export function DropdownExamples() {
  return (
    <Dropdown
      trigger={<button>Menu</button>}
      items={[
        { id: "edit", label: "Edit", icon: Edit },
        { id: "settings", label: "Settings", icon: Settings01 },
        { id: "divider", type: "divider" },
        { id: "delete", label: "Delete", icon: Trash02, color: "error" },
        { id: "logout", label: "Logout", icon: LogOut },
      ]}
      onAction={(id) => console.log(`Action: ${id}`)}
    />
  );
}
```

--------------------------------

### Importing and Using Icons

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/CLAUDE.md

Demonstrates named imports for tree-shakeable icon usage and how to pass icons as props or JSX elements. Ensure 'data-icon' is included when using icons as JSX elements.

```typescript
import { Home01, Settings01, ChevronDown } from "@untitledui/icons";

<Button iconLeading={ChevronDown}>Options</Button>

<Home01 className="size-5 text-gray-600" />

<Button iconLeading={<ChevronDown data-icon className="size-4" />}>Options</Button>
```

--------------------------------

### Import Modal Components

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/application-components.md

Import necessary components for creating modal dialogs.

```typescript
import { ModalOverlay, Modal, Dialog, DialogTrigger } from "@/components/application/modals/modal";
```

--------------------------------

### ThemeProvider for Theme Management

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/api-reference.md

Use ThemeProvider to manage light, dark, and system themes with localStorage persistence. It accepts props for custom class names, default themes, and storage keys.

```typescript
import { ThemeProvider, useTheme } from "@/providers/theme-provider";

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  );
}

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme
    </button>
  );
}
```

--------------------------------

### Tree-Shaking with Named Imports

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/component-exports.md

Illustrates the correct way to use named imports for tree-shaking, ensuring only necessary components are included in the bundle.

```typescript
// ✅ Correct - Only Button is included in bundle
import { Button } from "@/components/base/buttons/button";

// ✅ Correct - Only included icons are in bundle
import { Home01, Settings01 } from "@untitledui/icons";

// ❌ Avoid - Imports entire icon library
import * as Icons from "@untitledui/icons";
```

--------------------------------

### Responsive Design with Tailwind CSS

Source: https://github.com/untitleduico/untitledui-vite-starter-kit/blob/main/_autodocs/README.md

Illustrates a mobile-first responsive design approach using Tailwind CSS breakpoints. Apply different spacing and layout rules based on screen size.

```typescript
className="flex flex-col md:flex-row gap-4 md:gap-6 lg:gap-8"
```