### Clone and Run Astro Template

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/README.md

Clone the repository, install dependencies, and start the development server.

```bash
git clone https://github.com/area44/astro-shadcn-ui-template
cd astro-shadcn-ui-template
pnpm install
pnpm dev
```

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

### Import Alias Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/00-START-HERE.txt

Use the '@/' prefix for all imports to reference components and utilities within the project.

```text
Use @/ prefix for all imports
  Example: import { Button } from "@/components/ui/button"
```

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

### Complete Product Card Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-card.md

A comprehensive example demonstrating a product card with an image, header, content, and footer. This showcases the integration of CardFooter within a larger UI component.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, FieldLabel } from "@/components/ui/field";

export function ProductCard({ product }) {
  return (
    <Card className="max-w-sm">
      <img
        src={product.image}
        alt={product.name}
        className="w-full h-48 object-cover"
      />
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>{product.name}</CardTitle>
            <CardDescription>${product.price}</CardDescription>
          </div>
          <CardAction>
            <Button size="icon" variant="ghost">
              <HeartIcon />
            </Button>
          </CardAction>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          {product.description}
        </p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Add to Cart</Button>
      </CardFooter>
    </Card>
  );
}
```

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

### Astro Configuration Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/overview.md

Example Astro configuration file (`astro.config.ts`) demonstrating integration with React and Tailwind CSS, and site URL/base path configuration.

```typescript
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwind from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  integrations: [react()],
  vite: {
    plugins: [tailwind()]
  },
  site: process.env.VERCEL ? `https://${process.env.VERCEL_URL}` : process.env.SITE,
  base: process.env.BASE
});
```

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

### Basic Confirmation Dialog Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Demonstrates a basic AlertDialog for user confirmation before an action.

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { TrashIcon, AlertCircleIcon } from "lucide-react";

// Basic confirmation dialog
<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>
    Delete Item
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete the item.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

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

### File Input

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Example of using the Input component for file uploads.

```tsx
import { Input } from "@/components/ui/input";

// File input
<Input type="file" />
```

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

### Development Commands

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/README.md

Run these commands to manage the development lifecycle of the project, including starting the server, building, previewing, formatting, and linting.

```bash
pnpm dev
```

```bash
pnpm build
```

```bash
pnpm preview
```

```bash
pnpm fmt
```

```bash
pnpm lint
```

```bash
pnpm check
```

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

### Basic Select Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Demonstrates a basic Select component with string options. Ensure the 'items' prop is provided with an array of strings.

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// Basic select
<Select items={"["Option 1", "Option 2", "Option 3"]"}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {(item) => (
        <SelectItem key={item} value={item}>
          {item}
        </SelectItem>
      )}
    </SelectGroup>
  </SelectContent>
</Select>
```

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

### shadcn/ui Configuration Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/overview.md

shadcn/ui configuration file (`components.json`) specifying UI style, icon library, Tailwind CSS settings, and component import aliases.

```json
{
  "$schema": "https://ui.shadcn.com/schemas/config.json",
  "style": "base-vega",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "imageLibrary": "@/components/ui/image",
  "icons": "lucide-react",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
```

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

### Controlled Popover Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Illustrates how to control the Popover's open state programmatically using the 'open' and 'onOpenChange' props.

```tsx
const [open, setOpen] = useState(false);
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger render={<Button />}>
    Toggle Popover
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content</p>
    <Button onClick={() => setOpen(false)}>Close</Button>
  </PopoverContent>
</Popover>
```

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

### Render ComponentExample

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Display the ComponentExample component within a React page. This component demonstrates Card and Form examples.

```tsx
import { ComponentExample } from "@/components/ComponentExample";

// Display component examples
export default function Page() {
  return <ComponentExample />;
}
```

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

### TypeScript Configuration Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/overview.md

TypeScript configuration file (`tsconfig.json`) extending Astro's strict configuration and defining a path alias for source files.

```json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

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

### Basic Vertical Field Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Demonstrates the basic usage of the Field component in a vertical layout with a label, input, and description.

```tsx
<Field>
  <FieldLabel htmlFor="email">Email Address</FieldLabel>
  <Input id="email" type="email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>
```

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

### Basic Combobox Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

A simple Combobox with a searchable input and a list of items. Use this for single-select scenarios where filtering is needed.

```tsx
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const frameworks = ["React", "Vue", "Svelte", "Astro", "Next.js"];

// Basic combobox
<Combobox items={frameworks}>
  <ComboboxInput placeholder="Select framework..." />
  <ComboboxContent>
    <ComboboxEmpty>No frameworks found</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

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

### Button Component

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Documentation for the flexible Button component, detailing its parameters, variants, sizes, and usage examples.

```APIDOC
## Button Component

### Description
A flexible button component with multiple variants and sizes, built on Base UI primitives. It allows for customization of style, size, and behavior.

### Method
React Component

### Parameters
#### Component Props
- **variant** (string) - Optional - Default: "default" - Button style variant. Options: "default", "outline", "secondary", "ghost", "destructive", "link".
- **size** (string) - Optional - Default: "default" - Button size variant. Options: "default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg".
- **className** (string) - Optional - Additional Tailwind CSS classes.
- **...props** (ButtonPrimitive.Props) - Optional - All HTML button element props.

### Variant Styles
- **default**: Solid primary color background.
- **outline**: Bordered style with transparent background.
- **secondary**: Solid secondary color background.
- **ghost**: Transparent background, hover highlight.
- **destructive**: Red/danger styled button.
- **link**: Text-only link style with underline on hover.

### Size Variants
- **default**: h-9, px-2.5 - Standard button.
- **xs**: h-6, px-2 - Small text button.
- **sm**: h-8, px-2.5 - Small button.
- **lg**: h-10, px-2.5 - Large button.
- **icon**: 36x36px - Icon-only buttons.
- **icon-xs**: 24x24px - Small icon buttons.
- **icon-sm**: 32x32px - Medium icon buttons.
- **icon-lg**: 40x40px - Large icon buttons.

### Request Example
```tsx
import { Button } from "@/components/ui/button";

// Default primary button
<Button>Click me</Button>

// Different variants
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button variant="link">Link style</Button>

// Different sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><TrashIcon /></Button>
<Button size="icon-sm"><EditIcon /></Button>

// With custom classes
<Button className="w-full">Full width</Button>

// Disabled state
<Button disabled>Disabled</Button>

// In forms
<Button type="submit">Submit</Button>
<Button type="reset">Reset</Button>

// With loading state (custom implementation)
<Button disabled={isLoading}>
  {isLoading ? "Loading..." : "Send"}
</Button>
```

### Accessibility
- Automatically handles focus states with ring-ring color.
- Supports aria-* attributes.
- Invalid state styling with aria-invalid.
- Disabled state with proper cursor and opacity.

### Import Path
```typescript
import { Button, buttonVariants } from "@/components/ui/button";
```
```

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

### Badge Component Usage Examples

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Demonstrates various ways to use the Badge component, including different variants, with icons, conditional rendering, and in multiple instances.

```tsx
import { Badge } from "@/components/ui/badge";

// Basic badge
<Badge>Default</Badge>
```

```tsx
// Different variants
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Alert</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>
```

```tsx
// With icons
<Badge>
  <CheckIcon className="mr-1 size-3" />
  Success
</Badge>
```

```tsx
// Status indicators
<Badge variant={status === "active" ? "default" : "ghost"}>
  {status}
</Badge>
```

```tsx
// Multiple badges
<div className="flex gap-2">
  <Badge variant="secondary">Design</Badge>
  <Badge variant="secondary">Frontend</Badge>
  <Badge variant="secondary">React</Badge>
</div>
```

```tsx
// In card headers
<Card>
  <CardHeader>
    <div className="flex justify-between items-start">
      <CardTitle>Feature</CardTitle>
      <Badge variant="secondary">New</Badge>
    </div>
  </CardHeader>
</Card>
```

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

### MainNav Component Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Example of how to use the MainNav component in a header. It can be styled with additional Tailwind CSS classes.

```tsx
import { MainNav } from "@/components/MainNav";

// In header
<header>
  <MainNav className="hidden lg:flex" />
</header>

// With custom styling
<MainNav className="gap-4" />
```

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

### Create a Complete Page Layout

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/EXAMPLES.md

Provides a full-page example integrating Header, Footer, and ComponentExample components within a main content area. This structure ensures a min-height of the screen and includes a container for centered content with padding.

```tsx
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import { ComponentExample } from "@/components/ComponentExample";

export default function HomePage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      
      <main className="flex-1">
        <div className="container mx-auto px-4 py-12">
          <h1 className="text-4xl font-bold mb-4">Welcome</h1>
          <p className="text-lg text-muted-foreground mb-8">
            Explore our component library and examples.
          </p>
          
          <ComponentExample />
        </div>
      </main>
      
      <Footer />
    </div>
  );
}
```

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

### Example Usage of ThemeToggle

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Demonstrates how to import and use the ThemeToggle component within a React application, typically in a header or navigation area.

```tsx
import { ThemeToggle } from "@/components/ThemeToggle";

// In header
<header>
  <ThemeToggle />
</header>

// Usage within layout
export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  );
}
```

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

### Settings Dialog with Tabs

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/EXAMPLES.md

Implement a settings dialog using cards, fields, and inputs. This example shows how to manage form state for various settings like email, theme, and notifications.

```tsx
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function SettingsDialog() {
  const [settings, setSettings] = useState({
    email: "",
    theme: "light",
    notifications: true,
  });

  const handleSave = () => {
    console.log("Settings saved:", settings);
  };

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Settings</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Field>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input
            id="email"
            value={settings.email}
            onChange={(e) => setSettings({ ...settings, email: e.target.value })}
          />
          <FieldDescription>Your email address</FieldDescription>
        </Field>

        <Field>
          <FieldLabel htmlFor="theme">Theme</FieldLabel>
          <Select
            items={["light", "dark", "auto"]}
            value={settings.theme}
            onValueChange={(theme) => setSettings({ ...settings, theme })}
          >
            <SelectTrigger id="theme">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {(item) => (
                  <SelectItem key={item} value={item}>
                    {item.charAt(0).toUpperCase() + item.slice(1)}
                  </SelectItem>
                )}
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>

        <Field>
          <div className="flex items-center justify-between">
            <FieldLabel>Notifications</FieldLabel>
            <input
              type="checkbox"
              checked={settings.notifications}
              onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
            />
          </div>
        </Field>
      </CardContent>
      <CardFooter className="gap-2">
        <Button variant="outline">Cancel</Button>
        <Button onClick={handleSave}>Save Settings</Button>
      </CardFooter>
    </Card>
  );
}
```

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

### Button Component Example Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Demonstrates various ways to use the Button component, including different variants, sizes, custom classes, disabled states, and form integration.

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

// Default primary button
<Button>Click me</Button>

// Different variants
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button variant="link">Link style</Button>

// Different sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><TrashIcon /></Button>
<Button size="icon-sm"><EditIcon /></Button>

// With custom classes
<Button className="w-full">Full width</Button>

// Disabled state
<Button disabled>Disabled</Button>

// In forms
<Button type="submit">Submit</Button>
<Button type="reset">Reset</Button>

// With loading state (custom implementation)
<Button disabled={isLoading}>
  {isLoading ? "Loading..." : "Send"}
</Button>
```

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

### Horizontal Field Layout Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Shows how to configure the Field component for a horizontal layout, suitable for checkboxes or inline elements.

```tsx
<Field orientation="horizontal">
  <FieldLabel htmlFor="newsletter">Subscribe to newsletter</FieldLabel>
  <input type="checkbox" id="newsletter" />
</Field>
```

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

### Input with Label and Form Layout

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Example of integrating the Input component within a form, including a label and required attribute.

```tsx
import { Input } from "@/components/ui/input";

// With label and form layout
<div>
  <label htmlFor="username">Username</label>
  <Input id="username" placeholder="Enter username" required />
</div>
```

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

### Card Component Size

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the available sizes for the Card component. Usage example shows how to apply a size prop.

```typescript
type CardSize = "default" | "sm";
```

```typescript
import { Card } from "@/components/ui/card";

<Card size="sm">
  {/* card content */}
</Card>
```

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

### Development Commands

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/00-START-HERE.txt

Common development commands for managing the Astro project, including starting the dev server, building for production, formatting, linting, and type checking.

```text
pnpm dev     - Start development server
  pnpm build   - Build for production
  pnpm fmt     - Format code
  pnpm lint    - Lint code
  pnpm check   - Lint and format
```

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

### Label Component Examples

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Demonstrates various ways to use the Label component, from basic association with form controls to custom styling and handling disabled states. It also shows integration with checkboxes and radio buttons.

```tsx
import { Label } from "@/components/ui/label";

// Basic label with input
<div>
  <Label htmlFor="email">Email Address</Label>
  <Input id="email" type="email" />
</div>

// With custom styling
<Label className="text-base font-semibold">
  Full Name
</Label>

// Disabled state (applied via group data)
<div data-disabled="true">
  <Label>This label appears disabled</Label>
</div>

// With checkbox or radio
<div className="flex items-center gap-2">
  <input type="checkbox" id="terms" />
  <Label htmlFor="terms">I agree to the terms</Label>
</div>
```

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

### Separator Component Example Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Demonstrates various ways to use the Separator component, including horizontal, vertical, within containers, navigation, and cards.

```tsx
import { Separator } from "@/components/ui/separator";

// Horizontal separator (default)
<Separator />

// Vertical separator
<Separator orientation="vertical" />

// In a container
<div className="space-y-4">
  <div>Section 1</div>
  <Separator />
  <div>Section 2</div>
</div>

// Between navigation items
<nav className="flex items-center gap-4">
  <a href="/">Home</a>
  <Separator orientation="vertical" className="h-6" />
  <a href="/about">About</a>
  <Separator orientation="vertical" className="h-6" />
  <a href="/contact">Contact</a>
</nav>

// In card with custom styling
<Card>
  <CardHeader>Title</CardHeader>
  <Separator className="my-6" />
  <CardContent>Content</CardContent>
</Card>
```

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

### Input Group Addon Alignment

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the alignment options for InputGroupAddon. Usage example shows setting the align prop.

```typescript
type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
```

```typescript
import { InputGroupAddon } from "@/components/ui/input-group";

<InputGroupAddon align="inline-end">
  {/* addon content */}
</InputGroupAddon>
```

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

### Badge Component Variants

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the possible variants for the Badge component. Usage example demonstrates how to apply a specific variant to a Badge.

```typescript
type BadgeVariants = {
  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
};
```

```typescript
import { Badge } from "@/components/ui/badge";

<Badge variant="secondary">Tag</Badge>
```

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

### Textarea Component Examples

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-basic.md

Illustrates different use cases for the Textarea component, including basic usage, controlled values, custom height, disabled states, and error handling. It also shows how to integrate it within a form.

```tsx
import { Textarea } from "@/components/ui/textarea";

// Basic textarea
<Textarea placeholder="Enter message" />

// With controlled value
const [message, setMessage] = useState("");
<Textarea
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  placeholder="Type your message here..."
/>

// With custom height
<Textarea className="min-h-32" placeholder="Taller textarea" />

// Disabled textarea
<Textarea disabled placeholder="Cannot edit" />

// With rows attribute
<Textarea rows={5} placeholder="5 rows tall" />

// Error state
<Textarea
  aria-invalid={!!error}
  placeholder="Invalid input"
/>

// In a form
<form>
  <label htmlFor="feedback">Feedback</label>
  <Textarea
    id="feedback"
    placeholder="Tell us what you think..."
    required
  />
</form>
```

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

### Theme Toggle State Management

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the 'Theme' type for light and dark modes. Usage example shows state management for theme toggling, with persistence noted to localStorage.

```typescript
type Theme = "light" | "dark";
```

```typescript
const [theme, setTheme] = useState<Theme>("light");
```

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

### CardHeader with Action Button

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-card.md

Demonstrates how to integrate an action button within the CardHeader, aligning title and description to the left and the action button to the right. This setup is useful for settings or management cards.

```tsx
<CardHeader>
  <div className="flex justify-between items-start">
    <div>
      <CardTitle>Settings</CardTitle>
      <CardDescription>Manage your preferences</CardDescription>
    </div>
    <CardAction>
      <Button size="icon"><MoreIcon /></Button>
    </CardAction>
  </div>
</CardHeader>
```

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

### Dashboard Grid Layout

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/EXAMPLES.md

Create a responsive dashboard layout using a grid system. This example displays statistics in cards, adapting to different screen sizes from one column on small screens to three columns on medium screens and larger.

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export function Dashboard() {
  const stats = [
    { label: "Total Users", value: 1234, status: "active" },
    { label: "Active Sessions", value: 156, status: "active" },
    { label: "Revenue", value: "$12,450", status: "growing" },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map((stat) => (
        <Card key={stat.label}>
          <CardHeader>
            <div className="flex justify-between items-start">
              <CardTitle>{stat.label}</CardTitle>
              <Badge variant={stat.status === "active" ? "default" : "secondary"}>
                {stat.status}
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stat.value}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
```

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

### Header Component Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Example of how to import and use the Header component within a React layout. It's typically placed at the top of the page structure.

```typescript
import { Header } from "@/components/Header";

// Typically used in layout
export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  );
}
```

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

### Customize Site Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-utils.md

Modify the `siteConfig` object in `src/lib/config.ts` to personalize your application's name, description, author details, links, and navigation items. This example shows how to update these fields for a custom application.

```typescript
export const siteConfig: SiteConfig = {
  name: "My Custom App",
  description: "Custom application description",
  url: "https://myapp.example.com",
  author: {
    name: "Your Name",
    url: "https://yourwebsite.com",
  },
  links: {
    github: "https://github.com/yourname/yourrepo",
  },
  navItems: [
    { href: "/docs", label: "Documentation" },
    { href: "/blog", label: "Blog" },
    { href: "https://external.com", label: "External", external: true },
  ],
};
```

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

### Astro Project Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/configuration.md

Main Astro configuration file (`astro.config.ts`) for project build, integrations, and environment setup. It dynamically resolves the site URL based on Vercel deployment environment or fallback variables.

```typescript
import react from "@astrojs/react";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config";

const site = process.env.VERCEL
  ? process.env.VERCEL_ENV === "production"
    ? "https://astro-shadcn-ui-template.vercel.app"
    : `https://${process.env.VERCEL_URL}`
  : (process.env.SITE ?? "http://localhost:4321");
const base = process.env.BASE || "/";

export default defineConfig({
  site,
  base,
  integrations: [react()],
  vite: {
    plugins: [tailwindcss()],
  },
});
```

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

### Multiple Cards in a Grid Layout

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-card.md

Provides an example of arranging multiple Card components in a responsive grid layout using Tailwind CSS classes. This is suitable for displaying lists of items.

```tsx
// Multiple cards in grid
<div className="grid grid-cols-3 gap-4">
  <Card>
    <CardHeader><CardTitle>Card 1</CardTitle></CardHeader>
  </Card>
  <Card>
    <CardHeader><CardTitle>Card 2</CardTitle></CardHeader>
  </Card>
  <Card>
    <CardHeader><CardTitle>Card 3</CardTitle></CardHeader>
  </Card>
</div>
```

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

### Accessing and Using Site Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Demonstrates how to import and access properties from the site configuration object, and how to map over navigation items.

```typescript
import { siteConfig } from "@/lib/config";

// Access configuration
const siteName = siteConfig.name;
const author = siteConfig.author.name;

// Iterate nav items
siteConfig.navItems.map(item => ({
  href: item.href,
  label: item.label,
  isExternal: item.external ?? false,
}));
```

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

### Button Component Variants and Sizes

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the possible variants and sizes for the Button component. Usage examples show direct component instantiation and using the `buttonVariants` utility for custom class generation.

```typescript
type ButtonVariants = {
  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
};
```

```typescript
import { Button, buttonVariants } from "@/components/ui/button";

// Direct component usage
<Button variant="outline" size="sm">
  Click me
</Button>

// Using buttonVariants outside component
const classes = buttonVariants({ variant: "ghost", size: "icon" });
<a href="/" className={classes}>
  Home
</a>
```

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

### Disabled Select Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Shows how to disable the Select component by passing the 'disabled' prop to the main Select component.

```tsx
<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Disabled" />
  </SelectTrigger>
  {/* Content */}
</Select>
```

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

### Import ComponentExample

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Import the ComponentExample component from its module path. This component showcases various UI elements.

```typescript
import { ComponentExample } from "@/components/ComponentExample";
```

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

### Separator Component Orientation

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the orientation for the Separator component. Usage example shows setting the orientation prop.

```typescript
type SeparatorOrientation = "horizontal" | "vertical";
```

```typescript
import { Separator } from "@/components/ui/separator";

<Separator orientation="vertical" />
```

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

### Dropdown Menu Item Variant

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the variants for DropdownMenuItem. Usage example shows how to apply the 'destructive' variant.

```typescript
type DropdownMenuItemVariant = "default" | "destructive";
```

```typescript
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";

<DropdownMenuItem variant="destructive">
  Delete
</DropdownMenuItem>
```

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

### Basic Popover Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Demonstrates the basic implementation of a Popover component with an InfoIcon trigger and simple title/description content.

```tsx
<Popover>
  <PopoverTrigger render={<Button variant="ghost" size="icon" />}>
    <InfoIcon />
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Information</PopoverTitle>
      <PopoverDescription>
        This is additional information about the topic.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

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

### Utility Functions and Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/INDEX.md

Provides documentation for essential utility functions and configuration exports, including CSS class merging and site configuration details.

```APIDOC
## Utility Functions and Configuration

### `cn()` Function

**Description:** A utility function for merging CSS classes with support for conditional logic.

### `SiteConfig` Type and `siteConfig` Export

**Description:** Defines the structure for site-wide configuration and provides a default export for customization.
```

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

### Layout and Navigation Components

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/INDEX.md

Documentation for layout and navigation components like Header, Footer, MainNav, MobileNav, and ThemeToggle.

```APIDOC
## Layout and Navigation Components

### `Header` Component

**Description:** The main header component, featuring GitHub star count fetching, responsive design, and theme toggle integration.

### `Footer` Component

**Description:** A footer component for attribution, typically including author and GitHub links, configurable via settings.

### `MainNav` Component

**Description:** The primary desktop navigation component, rendering items from configuration.

### `MobileNav` Component

**Description:** A mobile navigation component, often implemented as a hamburger menu with a full-screen popover.

### `ThemeToggle` Component

**Description:** A component for switching between light and dark themes, with persistence and system preference detection.

### `Icons` Component

**Description:** Provides access to SVG-based icon definitions, such as the GitHub icon.

### `ComponentExample` Component

**Description:** A utility component used for showcasing other components with data-driven demonstrations.
```

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

### InputGroup with Multiple Addons

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Demonstrates using multiple InputGroupAddon components, including text and buttons, for complex input scenarios.

```tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupButton,
  InputGroupText,
} from "@/components/ui/input-group";
import { CopyIcon } from "lucide-react";

// Multiple addons
<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs">
      <CopyIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

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

### Field Orientation Prop

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the possible orientations for the Field component. Usage example demonstrates setting the orientation prop.

```typescript
type FieldOrientation = "vertical" | "horizontal" | "responsive";
```

```typescript
import { Field } from "@/components/ui/field";

<Field orientation="horizontal">
  {/* field content */}
</Field>
```

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

### Basic UI Components

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/INDEX.md

Documentation for fundamental UI components such as Button, Input, Label, Textarea, Badge, and Separator.

```APIDOC
## Basic UI Components

### `Button` Component

**Description:** A versatile button component with various variant and size options.

### `Input` Component

**Description:** A text input field component supporting different types and event handling.

### `Label` Component

**Description:** A label component typically used with form inputs.

### `Textarea` Component

**Description:** A multi-line text input component with auto-expanding capabilities.

### `Badge` Component

**Description:** A component for displaying status or tag information.

### `Separator` Component

**Description:** A visual divider component available in horizontal and vertical orientations.
```

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

### Select Trigger Size

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the available sizes for the SelectTrigger component. Usage example shows how to set the size prop.

```typescript
type SelectSize = "sm" | "default";
```

```typescript
import { SelectTrigger } from "@/components/ui/select";

<SelectTrigger size="sm">
  <SelectValue />
</SelectTrigger>
```

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

### Import Path Alias Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/configuration.md

Demonstrates how to use the configured path alias `@/` to import modules from the `src` directory, simplifying import paths.

```typescript
// Instead of:
import { cn } from "../../lib/utils";

// Use:
import { cn } from "@/lib/utils";

// Works for all directories:
import { Button } from "@/components/ui/button";
import { siteConfig } from "@/lib/config";
import { Header } from "@/components/Header";
```

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

### Select Component Import Path

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Provides the complete import path for all available Select components and related utilities.

```typescript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
} from "@/components/ui/select";
```

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

### Field Group Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Demonstrates using Field components within a FieldGroup to create a layout for multiple related form fields.

```tsx
<FieldGroup>
  <Field>
    <FieldLabel htmlFor="firstname">First Name</FieldLabel>
    <Input id="firstname" />
  </Field>
  <Field>
    <FieldLabel htmlFor="lastname">Last Name</FieldLabel>
    <Input id="lastname" />
  </Field>
</FieldGroup>
```

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

### Alert Dialog Content Size

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/types.md

Defines the available sizes for the AlertDialogContent component. Usage example shows how to apply a size prop.

```typescript
type AlertDialogSize = "default" | "sm";
```

```typescript
import { AlertDialogContent } from "@/components/ui/alert-dialog";

<AlertDialogContent size="sm">
  {/* content */}
</AlertDialogContent>
```

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

### Project Structure Overview

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/overview.md

This snippet displays the directory structure of the Astro shadcn/ui template. It shows the organization of source files, UI components, utility libraries, and configuration files.

```tree
astro-shadcn-ui-template/
├── src/
│   ├── components/
│   │   ├── ui/                    # Primitive UI components
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   ├── badge.tsx
│   │   │   ├── separator.tsx
│   │   │   ├── popover.tsx
│   │   │   ├── textarea.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   ├── select.tsx
│   │   │   ├── alert-dialog.tsx
│   │   │   ├── field.tsx
│   │   │   ├── input-group.tsx
│   │   │   └── combobox.tsx
│   │   ├── Header.tsx             # Main header component
│   │   ├── Footer.tsx             # Main footer component
│   │   ├── MainNav.tsx            # Navigation component
│   │   ├── MobileNav.tsx          # Mobile-responsive navigation
│   │   ├── ThemeToggle.tsx        # Light/dark theme switcher
│   │   ├── Icons.tsx              # Icon definitions
│   │   └── ComponentExample.tsx   # Component showcase
│   ├── lib/
│   │   ├── config.ts              # Site configuration
│   │   └── utils.ts               # Utility functions
│   └── styles/
│       └── global.css             # Global styles
├── astro.config.ts                # Astro configuration
├── tsconfig.json                  # TypeScript configuration
├── components.json                # shadcn/ui configuration
└── package.json                   # NPM dependencies and scripts
```

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

### Dropdown Menu with Keyboard Shortcuts

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Shows how to display keyboard shortcuts alongside menu items. This enhances usability by providing quick access to actions.

```tsx
// With keyboard shortcuts
<DropdownMenu>
  <DropdownMenuTrigger render={<Button />}>File</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      New
      <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      Save
      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Field with Multiple Error Messages Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Shows how the FieldError component can display multiple error messages when provided with an array of error objects.

```tsx
<Field>
  <FieldLabel>Password</FieldLabel>
  <Input type="password" />
  <FieldError
    errors={[
      { message: "Must be at least 8 characters" },
      { message: "Must contain a number" },
    ]}
  />
</Field>
```

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

### Dialog, Menu, and Popover Components

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/INDEX.md

Details on components for creating modal dialogs, context menus, and non-modal popovers.

```APIDOC
## Dialog, Menu, and Popover Components

### `AlertDialog` Component

**Description:** A modal confirmation dialog component with various nested elements and size options.

### `Popover` Component

**Description:** A non-modal popup component for displaying information or interactive elements, with flexible positioning.

### `DropdownMenu` Component

**Description:** A context menu component with extensive nested options, including submenus, checkboxes, and radio buttons.
```

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

### Field with Error Display Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Illustrates how to integrate the Field component with error handling, using the FieldError component to display validation messages.

```tsx
const [errors, setErrors] = useState([]);
<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input
    id="username"
    aria-invalid={errors.length > 0}
  />
  <FieldError errors={errors} />
</Field>
```

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

### Dropdown Menu with Checkbox Items

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Shows how to implement a dropdown menu with checkbox items for toggling options. Useful for settings or visibility controls.

```tsx
// With checkboxes
const [showSidebar, setShowSidebar] = useState(true);
<DropdownMenu>
  <DropdownMenuTrigger render={<Button />}>View</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuCheckboxItem
      checked={showSidebar}
      onCheckedChange={setShowSidebar}
    >
      Show Sidebar
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### MobileNav Component Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Example of how to use the MobileNav component in a header, typically shown on mobile devices. It accepts additional Tailwind CSS classes.

```tsx
import { MobileNav } from "@/components/MobileNav";

// In header
<header>
  <MobileNav className="flex lg:hidden" />
</header>
```

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

### Footer Component Usage

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-layout.md

Example of how to import and use the Footer component within a React layout. It's typically placed at the bottom of the page structure.

```typescript
import { Footer } from "@/components/Footer";

// Typically used in layout
export default function Layout({ children }) {
  return (
    <>
      {children}
      <Footer />
    </>
  );
}
```

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

### Access and Utilize Site Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-utils.md

Import and use the `siteConfig` object to dynamically render site metadata, navigation, and other configuration-dependent elements throughout your application. This ensures consistency and simplifies updates.

```tsx
import { siteConfig } from "@/lib/config";

// Access site metadata
const title = siteConfig.name;
const description = siteConfig.description;

// Use in navigation
{siteConfig.navItems.map((item) => (
  <a href={item.href} key={item.href}>
    {item.label}
  </a>
))}

// Access author info
const authorName = siteConfig.author.name;
const authorUrl = siteConfig.author.url;

// Access GitHub repository
const repoUrl = siteConfig.links.github;
```

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

### package.json Configuration

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/configuration.md

The package.json file contains project metadata, dependencies, and scripts for the Astro Shadcn UI template. It defines build, development, and utility commands.

```json
{
  "name": "@area44/astro-shadcn-ui-template",
  "version": "26.02.24",
  "description": "The template helps you build apps with Astro, Tailwind CSS, and shadcn/ui.",
  "license": "MIT",
  "author": {
    "name": "AREA44",
    "url": "https://github.com/area44"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/area44/astro-shadcn-ui-template"
  },
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "start": "astro dev",
    "fmt": "oxfmt",
    "lint": "oxlint",
    "check": "oxlint && oxfmt"
  },
  "dependencies": { /* ... */ },
  "devDependencies": { /* ... */ }
}
```

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

### Layout Components Import

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/README.md

Import Header and Footer components for page structure.

```typescript
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
```

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

### Card Component Import Path

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-card.md

Specifies the exact import path for all Card-related components from the shadcn-ui library. Ensure this path is correct in your project setup.

```typescript
import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
```

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

### Multi-select Combobox with Chips

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

An example of a multi-select Combobox that displays selected items as chips. This is suitable for scenarios where users need to select multiple options from a list.

```tsx
<Combobox items={frameworks} multiple>
  <ComboboxChips>
    {(selected) =
      selected.map((item) => (
        <ComboboxChip key={item} value={item}>
          {item}
        </ComboboxChip>
      ))
    }
    <ComboboxChipsInput placeholder="Add more..." />
  </ComboboxChips>
  <ComboboxContent>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

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

### Dropdown Menu with Basic Items

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-dialogs.md

Demonstrates a basic dropdown menu with edit and delete options. Use this for simple actions associated with a trigger.

```tsx
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreVerticalIcon, EditIcon, TrashIcon } from "lucide-react";

// Basic menu
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
    <MoreVerticalIcon />
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      <EditIcon />
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem variant="destructive">
      <TrashIcon />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Applying Dark Mode Class

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/configuration.md

Demonstrates how to apply the 'dark' class to the html element for dark mode.

```html
<!-- Light mode -->
<html>

<!-- Dark mode -->
<html class="dark">
```

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

### Controlled Select Example

Source: https://github.com/area44/astro-shadcn-ui-template/blob/main/_autodocs/api-reference-ui-forms.md

Demonstrates a controlled Select component using React's 'useState' hook. The 'value' and 'onValueChange' props manage the selected state.

```tsx
const [role, setRole] = useState("dev");
<Select value={role} onValueChange={setRole}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {roles.map((r) => (
        <SelectItem key={r.value} value={r.value}>
          {r.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>
```