### Initialize Project with Starwind CLI

Source: https://starwind.dev/docs/getting-started/cli

Initializes project configuration, creates the `starwind.config.json` file, and installs necessary dependencies. This command guides the user through project setup questions.

```bash
pnpx starwind@latest init
```

```bash
npx starwind@latest init
```

```bash
yarn dlx starwind@latest init
```

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

### Tooltip Alignment Examples (React)

Source: https://starwind.dev/docs/components/tooltip

Demonstrates how to control the alignment of the tooltip relative to its trigger using the `align` prop. It shows examples for 'start', 'center', and 'end' alignments, as well as 'bottom start' and 'bottom end'.

```jsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

// Example 1: Horizontal alignment
<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Center</Button>
    </TooltipTrigger>
    <TooltipContent align="center">
      Aligned to center
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">End</Button>
    </TooltipTrigger>
    <TooltipContent align="end">
      Aligned to end
    </TooltipContent>
  </Tooltip>
</div>

// Example 2: Vertical and horizontal alignment
<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom Start</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">
      Bottom aligned to start
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom End</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">
      Bottom aligned to end
    </TooltipContent>
  </Tooltip>
</div>
```

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

### Combobox Component Setup in Astro

Source: https://starwind.dev/llms-full.txt

Demonstrates how to set up and use the Combobox component in Astro, which is built upon the Select component. This example shows how to configure the search input and populate the dropdown with items.

```astro
---
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectSearch,
  SelectTrigger,
  SelectValue,
} from "@/components/starwind/select";
---

<Select id="combobox-demo" name="framework">
  <SelectTrigger class="w-[240px]">
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectSearch placeholder="Search frameworks..." emptyText="No frameworks found." />
    <SelectGroup>
      <SelectItem value="astro">Astro</SelectItem>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="svelte">SvelteKit</SelectItem>
      <SelectItem value="solid">SolidStart</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

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

### Starwind Setup Options

Source: https://starwind.dev/docs/getting-started/cli

Provides details on the available options for the `starwind setup` command. These include skipping prompts, specifying a package manager, and enabling Starwind Pro setup.

```bash
Usage: starwind setup [options]
Setup Starwind Pro in your project
Options:  -y, --yes                   Skip confirmation prompts  -m, --package-manager <pm>  Package manager to use (choices: "npm", "pnpm", "yarn")  -p, --pro                   Setup Starwind Pro (default)  -h, --help                  display help for command
```

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

### InputGroup with Textarea and Buttons Example

Source: https://starwind.dev/docs/components/input-group

Shows a complex InputGroup setup featuring a Textarea for code input, along with addons for status text and action buttons like 'Run' and 'Copy'. This example utilizes components such as InputGroupTextarea, InputGroupText, and InputGroupButton, along with icons for visual cues. Dependencies include '@/components/starwind/input-group' and icons from '@tabler/icons'.

```astro
---import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupText,  InputGroupTextarea,} from "@/components/starwind/input-group";import ArrowRight from "@tabler/icons/outline/arrow-right.svg";import Code from "@tabler/icons/outline/code.svg";import Copy from "@tabler/icons/outline/copy.svg";---
    <InputGroup>
  <InputGroupTextarea
    id="textarea-code"
    placeholder="console.log('Hello, world!');"
    class="min-h-[180px] font-mono text-sm"
  />
  <InputGroupAddon align="block-end" class="border-t">
    <InputGroupText>Line 1, Column 1</InputGroupText>
    <InputGroupButton size="sm" class="ml-auto" variant="default">
      Run
      <ArrowRight />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="block-start" class="border-b">
    <InputGroupText class="font-mono font-medium">
      <Code />
      script.js
    </InputGroupText>
    <InputGroupButton class="ml-auto" size="icon-sm" aria-label="Copy code">
      <Copy />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

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

### Starwind UI Pagination Component Example

Source: https://starwind.dev/llms-full.txt

Demonstrates the usage of the Pagination component, showcasing its structure with PaginationContent, PaginationItem, and various link/navigation elements.

```astro
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#">Prev</PaginationPrevious>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#">Next</PaginationNext>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

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

### Tooltip Component Setup and Usage (Astro)

Source: https://starwind.dev/llms-full.txt

Illustrates the setup and usage of the Tooltip component in Astro, including Tooltip, TooltipTrigger, and TooltipContent. This allows for displaying contextual information on hover with customizable delays and animations.

```astro
--- 
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent> Add to library </TooltipContent>
</Tooltip>
```

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

### Initialize Starwind Project with CLI

Source: https://starwind.dev/docs/getting-started/cli

Initializes a new Starwind project by setting up configuration files, installing dependencies, and configuring Tailwind CSS. It prompts the user for project-specific details like component directory and Tailwind base color. This command is essential for starting a new project with Starwind.

```bash
npx starwind@latest init
```

```bash
┌   Welcome to the Starwind CLI
│◇  What is your components directory?
│  src/components
│◇  Where would you like to add the Tailwind .css file?
│  src/styles/starwind.css
│◇  What Tailwind base color would you like to use?
│  Neutral (default)
│◇  Select your preferred package manager
│  pnpm
│◇  Install tailwindcss@^4, @tailwindcss/vite@^4, @tailwindcss/forms@^0.5, tw-animate-css@^1, tailwind-variants@^3, tailwind-merge@^3, @tabler/icons@^3 using pnpm?
│  Yes
│◇  Packages installed successfully
│◇  Created project structure
│◇  Astro config setup completed
│◇  TypeScript path aliases configured
│◇  Created Tailwind configuration
│◇  CSS import added to layout
│◇  Updated project starwind configuration
│◇  Next steps ─────────────────────────────────────────────────────╮
│                                                                  │
│  Make sure your layout imports the src/styles/starwind.css file  │
│                                                                  │├──────────────────────────────────────────────────────────────────╯
│└  Enjoy using Starwind UI 🚀
```

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

### Create starwind.config.json

Source: https://starwind.dev/docs/getting-started/installation

This is an example of the `starwind.config.json` file that should be created in your project root when performing a manual installation of Starwind UI. The content of this file is not provided in the input, but its existence is required.

```json
{
  // Add your Starwind UI configuration here
}
```

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

### Full Sheet Example

Source: https://starwind.dev/docs/components/sheet

An example demonstrating the integration of all Sheet component parts to create a functional sheet.

```APIDOC
## Full Sheet Example

### Description
An example demonstrating the integration of all Sheet component parts to create a functional sheet.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```astro
---
import {
  Button
} from "@/components/starwind/button";
import {
  Input
} from "@/components/starwind/input";
import {
  Label
} from "@/components/starwind/label";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/starwind/sheet";
---

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 px-4">
      <div class="grid gap-2">
        <Label for="name">Name</Label>
        <Input id="name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="username">Username</Label>
        <Input id="username" value="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### Basic Input OTP Setup

Source: https://starwind.dev/docs/components/input-otp

Demonstrates the fundamental setup of the Input OTP component using Astro. It includes importing necessary components and structuring the OTP input with slots.

```astro
---import {
  InputOtp,
  InputOtpGroup,
  InputOtpSlot,
} from "@/components/starwind/input-otp";---
<InputOtp maxLength={6}>
  <InputOtpGroup>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtpGroup>
</InputOtp>
```

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

### Alert Component Example Astro

Source: https://starwind.dev/llms-full.txt

Shows an example of the Alert component in Astro, including its variants. It demonstrates how to import and use Alert, AlertTitle, and AlertDescription with a 'variant' prop.

```astro
---
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
---

<Alert variant="info">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an "AlertDescription".
  </AlertDescription>
</Alert>
```

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

### Initialize Starwind Project

Source: https://starwind.dev/docs/getting-started/cli

Initializes a new project with Starwind. Supports default values and a Pro setup. Use `-h` for help.

```bash
starwind init [options]

Initialize your project with Starwind
Options:
  -d, --defaults  Use default values for all prompts
  -p, --pro       Initialize with Starwind Pro setup
  -h, --help      display help for command
```

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

### Input OTP API Reference Example

Source: https://starwind.dev/docs/components/input-otp

Provides an example of using the InputOtp component with specific API props like `name`, `maxLength`, and `pattern`. It demonstrates how to configure the component for alphanumeric input.

```astro
<InputOtp maxLength={6} name="otp" pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  <InputOtpGroup>
    <InputOtpSlot index={0} />
  </InputOtpGroup>
</InputOtp>
```

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

### PopoverContent Placement and Animation Example (Vue)

Source: https://starwind.dev/docs/components/popover

Shows how to configure the PopoverContent component with specific placement ('side', 'align') and animation timing ('sideOffset', 'animationDuration'). This example sets the content to appear below and aligned to the start of the trigger.

```vue
<script setup>
import { PopoverContent } from "@/components/starwind/popover";
</script>

<PopoverContent side="bottom" align="start" sideOffset={8} animationDuration={180}>
  Popover content
</PopoverContent>
```

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

### Starwind UI CLI Installation (Shell)

Source: https://starwind.dev/docs/getting-started/installation

These commands demonstrate how to install Starwind UI using its CLI. The process involves creating a new Astro project (if one doesn't exist) and then running the 'starwind init' command to configure the project, set up necessary files, and install dependencies.

```bash
pnpm create astro@latest
npx starwind@latest init
```

```bash
npm create astro@latest
npx starwind@latest init
```

```bash
yarn create astro
yarn dlx starwind@latest init
```

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

### Example Button with API Props (Astro)

Source: https://starwind.dev/docs/components/button

Provides a concrete example of using the Button component with specific `variant` and `size` props, demonstrating how to configure its appearance and behavior.

```astro
<Button variant="default" size="md">Button</Button>
```

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

### Checkbox Component Usage in Astro

Source: https://starwind.dev/llms-full.txt

Provides an example of using the Checkbox component in Astro. It shows the necessary import and how to render a basic checkbox with an ID and label.

```astro
---
import { Checkbox } from "@/components/starwind/checkbox";
---

<Checkbox id="demo-checkbox" label="Checkbox" />
```

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

### Starwind UI Input Component API Reference Example

Source: https://starwind.dev/docs/components/input

An example showcasing the Input component with specified size, type, and placeholder, aligning with API reference.

```astro
<Input size="md" type="text" placeholder="Enter text" />
```

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

### Toggle Component API Reference Example

Source: https://starwind.dev/docs/components/toggle

An example demonstrating the usage of the Toggle component with various API props like 'variant', 'size', 'defaultPressed', and 'syncGroup'.

```astro
<Toggle variant="outline" size="md" defaultPressed syncGroup="filters">
  Toggle filters
</Toggle>
```

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

### Button Component in Astro

Source: https://starwind.dev/llms-full.txt

Provides an example of the Button component from Starwind UI. This component is customizable with different variants and sizes, suitable for various user interactions.

```astro
<Button variant="primary" size="md">Click me</Button>
```

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

### Accordion Component Example Astro

Source: https://starwind.dev/llms-full.txt

Demonstrates the usage of the Accordion component in Astro. It shows how to import and use Accordion, AccordionItem, AccordionTrigger, and AccordionContent with basic props.

```astro
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast, scalable, and
      secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

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

### Initialize Starwind UI CLI

Source: https://starwind.dev/llms-full.txt

Initializes Starwind UI in your Astro project using the provided CLI command. This setup is recommended for integrating the component library.

```bash
pnpx starwind@latest init
# or
npx starwind@latest init
# or
yarn dlx starwind@latest init
```

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

### Starwind CLI init Command Options

Source: https://starwind.dev/docs/getting-started/cli

Provides options for the `starwind init` command to customize the initialization process. The `--defaults` option uses predefined values, while `--pro` enables Starwind Pro setup. The `-h` or `--help` option displays usage information.

```bash
Usage: starwind init [options]
Initialize your project with Starwind
Options:  -d, --defaults  Use default values for all prompts  -p, --pro       Initialize with Starwind Pro setup  -h, --help      display help for command
```

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

### Input OTP Component

Source: https://starwind.dev/docs/components/input-otp

Documentation for the Input OTP component, covering its installation, general usage, and specific examples like using separators and alphanumeric patterns.

```APIDOC
## Input OTP Component

### Description
The Input OTP component provides a user-friendly way to input one-time passwords and verification codes. It supports keyboard navigation, paste handling, and pattern validation. The essential components are `InputOtp`, `InputOtpGroup`, and `InputOtpSlot`. The `InputOtpSeparator` provides visual separation between groups of slots.

### Installation
```bash
npx starwind@latest add input-otp
```

### Usage Examples

#### Basic Usage
```astro
---
import {
  InputOtp,
  InputOtpGroup,
  InputOtpSlot,
} from "@/components/starwind/input-otp";
---

<InputOtp maxLength={6}>
  <InputOtpGroup>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtpGroup>
</InputOtp>
```

#### With Separator
Use `InputOtpSeparator` to visually group slots, commonly used for phone verification codes or formatted inputs.

```astro
---
import {
  InputOtp,
  InputOtpGroup,
  InputOtpSeparator,
  InputOtpSlot,
} from "@/components/starwind/input-otp";
---

<InputOtp maxLength={6}>
  <InputOtpGroup>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
  </InputOtpGroup>
  <InputOtpSeparator />
  <InputOtpGroup>
    <InputOtpSlot index={3} />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtpGroup>
</InputOtp>
```

#### Alphanumeric Pattern
Use the `pattern` prop with `REGEXP_ONLY_DIGITS_AND_CHARS` to allow both letters and numbers.

```astro
---
import {
  InputOtp,
  InputOtpGroup,
  InputOtpSlot,
  REGEXP_ONLY_DIGITS_AND_CHARS,
} from "@/components/starwind/input-otp";
---

<InputOtp maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  <InputOtpGroup>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtpGroup>
</InputOtp>
```

#### Sizes
The `InputOtpSlot` component supports three sizes: `sm`, `md` (default), and `lg`.

```astro
---
import {
  InputOtp,
  InputOtpGroup,
  InputOtpSlot,
} from "@/components/starwind/input-otp";
---

{/* Example for different sizes would go here */}
```

### API Reference

#### InputOtp

*   **maxLength** (number) - Required - The maximum number of characters the OTP input can hold.
*   **pattern** (RegExp) - Optional - A regular expression to validate the input characters.

#### InputOtpGroup

This component groups `InputOtpSlot` components.

#### InputOtpSlot

*   **index** (number) - Required - The index of the slot.
*   **size** (string) - Optional - The size of the slot ('sm', 'md', 'lg'). Defaults to 'md'.

#### InputOtpSeparator

This component is used for visual separation between `InputOtpGroup` components.

#### Exported Constants

*   **REGEXP_ONLY_DIGITS_AND_CHARS**: A RegExp constant for alphanumeric input.

### Events

*   **onComplete** (value: string) - Triggered when the OTP input is complete.

### Changelog

*   (Details about changes would be listed here)
```

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

### InputGroup with Spinner Example

Source: https://starwind.dev/docs/components/input-group

Illustrates how to integrate the Spinner component within an InputGroup for visual feedback during loading or processing states. This example showcases different placements of the Spinner using InputGroupAddon. It depends on components from '@/components/starwind/input-group' and '@/components/starwind/spinner'.

```astro
---import {  InputGroup,  InputGroupAddon,  InputGroupInput,  InputGroupText,} from "@/components/starwind/input-group";import { Spinner } from "@/components/starwind/spinner";---
    <div class="grid w-full max-w-sm gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Searching..." />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>

      <InputGroup>
    <InputGroupInput placeholder="Processing..." />
    <InputGroupAddon>
      <Spinner />
    </InputGroupAddon>
  </InputGroup>

      <InputGroup>
    <InputGroupInput placeholder="Saving changes..." />
    <InputGroupAddon align="inline-end">
      <InputGroupText>Saving...</InputGroupText>
      <Spinner />
    </InputGroupAddon>
  </InputGroup></div>
```

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

### Popover Alignment Options in Astro

Source: https://starwind.dev/docs/components/popover

Illustrates how to control the horizontal alignment of the PopoverContent relative to its trigger using the `align` prop in Astro. Examples show 'start', 'center', and 'end' alignments.

```astro
---import { Button } from "@/components/starwind/button";import { Popover, PopoverContent, PopoverTrigger } from "@/components/starwind/popover";---
    <Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Start</Button>
  </PopoverTrigger>
  <PopoverContent align="start" class="w-40">
    Aligned to start.
  </PopoverContent>
</Popover>
    <Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Center</Button>
  </PopoverTrigger>
  <PopoverContent align="center" class="w-40">
    Aligned to center.
  </PopoverContent>
</Popover>
    <Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">End</Button>
  </PopoverTrigger>
  <PopoverContent align="end" class="w-40">
    Aligned to end.
  </PopoverContent>
</Popover>
```

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

### Starwind UI Tooltip Component Example

Source: https://starwind.dev/llms-full.txt

Illustrates the compound component pattern using the Tooltip component. It shows how TooltipTrigger and TooltipContent work together to create a tooltip.

```astro
<Tooltip>
  <TooltipTrigger>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent> Add to library </TooltipContent>
</Tooltip>
```

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

### Aspect Ratio Component Usage Examples (Astro)

Source: https://starwind.dev/docs/components/aspect-ratio

Demonstrates how to use the AspectRatio component in Astro with different aspect ratios. It shows examples for default 16:9, 4:3, 1:1, 21:9, and embedding a YouTube video.

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={16 / 9}>
  <img
    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    alt="Photo by Drew Beamer"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={16 / 9}>
  <div class="flex items-center justify-center w-full h-full bg-muted rounded-md">
    <span class="text-sm text-muted-foreground">16:9 Aspect Ratio</span>
  </div>
</AspectRatio>
```

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={4 / 3}>
  <img
    src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80"
    alt="Photo by Kari Shea"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={1}>
  <img
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&dpr=2&q=80"
    alt="Photo by Ayo Ogunseinde"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={21 / 9}>
  <img
    src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&dpr=2&q=80"
    alt="Photo by Simon Berger"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

```astro
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    class="w-full h-full rounded-md"
  ></iframe>
</AspectRatio>
```

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

### Switch API Reference Example

Source: https://starwind.dev/docs/components/switch

An example demonstrating the usage of the Switch component with its primary props: id, label, variant, size, and checked. This serves as a practical illustration of how to integrate the Switch into an application according to its API definition.

```jsx
import { Switch } from "@/components/starwind/switch";

<Switch id="notifications" label="Notifications" variant="primary" size="md" checked />
```

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

### Textarea Component Usage Examples

Source: https://starwind.dev/docs/components/textarea

Examples demonstrating how to use the Textarea component with different sizes and states.

```APIDOC
## Textarea Component Usage

### Basic Usage
```astro
---import { Textarea } from "@/components/starwind/textarea";---
<Textarea placeholder="Type something..." />
```

### Sizing
```astro
---import { Textarea } from "@/components/starwind/textarea";---
<Textarea size="sm" placeholder="Small textarea" />
<Textarea size="md" placeholder="Medium textarea" />
<Textarea size="lg" placeholder="Large textarea" />
```

### Disabled State
```astro
---import { Textarea } from "@/components/starwind/textarea";---
<Textarea disabled placeholder="Disabled textarea" />
```
```

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

### Card Component Structure in Astro

Source: https://starwind.dev/llms-full.txt

Illustrates the usage of the Card component in Astro for displaying content in a structured card format. It includes examples for CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

```astro
---
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/starwind/card";
import { Button } from "@/components/starwind/button";
---

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>
```

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

### Carousel Component Implementation in Astro

Source: https://starwind.dev/llms-full.txt

Shows how to implement a responsive carousel using Starwind's Carousel components in Astro. This example demonstrates setting options, looping through items, and including navigation buttons.

```astro
---
import { Card, CardContent } from "@/components/starwind/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/starwind/carousel";
---

<Carousel opts={{ align: "start" }} class="mx-auto w-full max-w-xs">
  <CarouselContent>
    {
      Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem>
          <div class="p-1">
            <Card>
              <CardContent class="flex aspect-square items-center justify-center p-6">
                <span class="text-4xl font-semibold">{index + 1}</span>
              </CardContent>
            </Card>
          </div>
        </CarouselItem>
      ))
    }
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

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

### Alert API Example (Astro)

Source: https://starwind.dev/docs/components/alert

A basic example showing the Alert component's root usage with a specified variant. This demonstrates how to apply different visual styles to the alert container.

```astro
<Alert variant="info">  <!-- Alert content --></Alert>
```

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

### Item Component Examples (Astro)

Source: https://starwind.dev/llms-full.txt

Illustrates various ways to use the Item component and its sub-components (ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia, ItemGroup, ItemSeparator) for building rich content blocks like lists and notifications.

```astro
---
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemMedia,
  ItemGroup,
  ItemSeparator,
} from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import Plus from "@tabler/icons/outline/plus.svg";
---

<!-- Basic Item -->
<Item variant="outline">
  <ItemContent>
    <ItemTitle>Basic Item</ItemTitle>
    <ItemDescription>A simple item with title and description.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Action</Button>
  </ItemActions>
</Item>

<!-- Item with Avatar -->
<Item variant="outline">
  <ItemMedia>
    <Avatar>
      <AvatarImage src="https://github.com/Boston343.png" alt="@BowTiedWebReapr" />
      <AvatarFallback>WR</AvatarFallback>
    </Avatar>
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Web Reaper</ItemTitle>
    <ItemDescription>Creator of Starwind UI</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
      <Plus />
    </Button>
  </ItemActions>
</Item>

<!-- Item Group -->
<ItemGroup>
  <Item>
    <ItemContent>
      <ItemTitle>First Item</ItemTitle>
      <ItemDescription>Description for first item</ItemDescription>
    </ItemContent>
  </Item>
  <ItemSeparator />
  <Item>
    <ItemContent>
      <ItemTitle>Second Item</ItemTitle>
      <ItemDescription>Description for second item</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>
```

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

### Textarea API Reference Example

Source: https://starwind.dev/docs/components/textarea

An example demonstrating the Textarea component's API, specifically showing how to set the 'size' and 'placeholder' props. It also notes that standard HTML textarea attributes are accepted.

```astro
<Textarea size="md" placeholder="Type something..." />
```

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

### Breadcrumb Component in Astro

Source: https://starwind.dev/llms-full.txt

Shows how to implement a Breadcrumb navigation component using Starwind UI. This example includes various elements like BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbEllipsis for creating a hierarchical navigation path.

```astro
---
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@/components/starwind/breadcrumb";
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbEllipsis />
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products/categories">Categories</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Electronics</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

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

### Tooltip Alignment Examples (Astro)

Source: https://starwind.dev/docs/components/tooltip

Demonstrates how to control the alignment of the tooltip content relative to the trigger element using the 'align' prop. This includes aligning the tooltip to the start, center, or end of the trigger, and combining alignment with positioning.

```astro
---import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---
<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Center</Button>
    </TooltipTrigger>
    <TooltipContent align="center">
      Aligned to center
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">End</Button>
    </TooltipTrigger>
    <TooltipContent align="end">
      Aligned to end
    </TooltipContent>
  </Tooltip>
</div>

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom Start</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">
      Bottom aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom End</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">
      Bottom aligned to end
    </TooltipContent>
  </Tooltip>
</div>
```

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

### 1:1 Aspect Ratio Example

Source: https://starwind.dev/docs/components/aspect-ratio

Provides an example of creating a 1:1 (square) aspect ratio with the AspectRatio component. This snippet uses an image as its content.

```jsx
---import { AspectRatio } from "@/components/starwind/aspect-ratio";---
<AspectRatio ratio={1}>  <img
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&dpr=2&q=80"
    alt="Photo by Ayo Ogunseinde"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

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

### Input Group with Icons (JS)

Source: https://starwind.dev/docs/components/input-group

Shows how to integrate icons within Input Groups for visual cues or actions. Icons can be placed at the start or end of the input. This example utilizes various icons from '@tabler/icons/outline' and the InputGroup components.

```javascript
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/starwind/input-group";
import CircleCheck from "@tabler/icons/outline/circle-check.svg";
import CreditCard from "@tabler/icons/outline/credit-card.svg";
import InfoCircle from "@tabler/icons/outline/info-circle.svg";
import Mail from "@tabler/icons/outline/mail.svg";
import Search from "@tabler/icons/outline/search.svg";
import Star from "@tabler/icons/outline/star.svg";

---
<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <Search />
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput type="email" placeholder="Enter your email" />
    <InputGroupAddon>
      <Mail />
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="Card number" />
    <InputGroupAddon>
      <CreditCard />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <CircleCheck />
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="Favorites" />
    <InputGroupAddon align="inline-end">
      <Star />
      <InfoCircle />
    </InputGroupAddon>
  </InputGroup>
</div>
```

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

### AspectRatio Usage Examples

Source: https://starwind.dev/docs/components/aspect-ratio

Examples demonstrating how to use the AspectRatio component with different aspect ratios and content types.

```APIDOC
## AspectRatio Usage Examples

### 21:9 Ratio (Ultrawide)

This example shows how to use the AspectRatio component to display an image with a 21:9 aspect ratio.

```html
<AspectRatio ratio={21 / 9}>
  <img src="https://images.unsplash.com/photo-1506905925346-21bda4df32df4?w=800&dpr=2&q=80" alt="Photo by Simon Berger" class="rounded-md object-cover w-full h-full" />
</AspectRatio>
```

### With Video (16:9 Ratio)

This example demonstrates using the AspectRatio component to embed a YouTube video with a 16:9 aspect ratio.

```html
<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    class="w-full h-full rounded-md"
  ></iframe>
</AspectRatio>
```
```

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

### Collapsible Component Example (Astro)

Source: https://starwind.dev/llms-full.txt

Demonstrates the usage of the Collapsible component for creating expandable and collapsible content sections. It utilizes CollapsibleTrigger and CollapsibleContent for managing the visibility of content, with custom styling and integration with other Starwind components like Button.

```astro
---
import { Button } from "@/components/starwind/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import IconSelector from "@tabler/icons/outline/selector.svg";
---

<Collapsible class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">@starwind-ui starred 3 repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon-sm">
        <IconSelector class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">astro</div>
  <CollapsibleContent class="space-y-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">tailwindcss</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">starwind-ui</div>
  </CollapsibleContent>
</Collapsible>
```

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

### InputGroupAddon API Reference Example

Source: https://starwind.dev/docs/components/input-group

Demonstrates the usage of InputGroupAddon, a flexible container for various elements within an input group. This example shows an addon aligned to the end with an icon. The `align` prop can be set to 'inline-start', 'inline-end', 'block-start', or 'block-end'.

```astro
<InputGroupAddon align="inline-end">
  <Search />
</InputGroupAddon>
```

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

### Toast Notification System Setup and Usage (Astro/TypeScript)

Source: https://starwind.dev/llms-full.txt

Demonstrates how to set up the Toaster component in an Astro layout and use the toast API for displaying various types of notifications. Supports simple messages, options, variants, promises, and toast updates/dismissals.

```astro
--- 
import { Toaster } from "@/components/starwind/toast";
---

<body>
  <!-- your content -->
  <Toaster position="bottom-right" />
</body>
```

```typescript
import { toast } from "@/components/starwind/toast";

// Simple toast
tost("Hello world");

// With options
tost("Title", { description: "Description text" });

// Variant shortcuts
tost.success("Saved successfully");
tost.error("Something went wrong");
tost.warning("Check your input");
tost.info("New update available");
tost.loading("Processing..."); // Does not auto-dismiss

// Promise handling (auto loading/success/error states)
tost.promise(asyncOperation(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Failed to save",
});

// Update existing toast
const id = tost("Processing...");
tost.update(id, { title: "Done!", variant: "success" });

// Dismiss toasts
tost.dismiss(id); // Dismiss specific toast
tost.dismiss(); // Dismiss all toasts
```

```astro
--- 
import { Button } from "@/components/starwind/button";
---

<Button id="show-toast">Show Toast</Button>

<script>
  import { toast } from "@/components/starwind/toast";

  document.getElementById("show-toast")?.addEventListener("click", () => {
    toast.success("Success!", {
      description: "Your changes have been saved.",
    });
  });
</script>
```

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

### AspectRatio API Reference Example

Source: https://starwind.dev/docs/components/aspect-ratio

A basic example illustrating the usage of the AspectRatio component with an image. It highlights the 'ratio' prop for setting the aspect ratio and 'class' for styling. The image is configured to cover the entire area defined by the aspect ratio.

```html
<AspectRatio ratio={16 / 9}>  <img src="image.jpg" alt="Description" class="object-cover w-full h-full" /></AspectRatio>
```

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

### Switch Component Usage (Astro)

Source: https://starwind.dev/llms-full.txt

Demonstrates the implementation of the Starwind Switch component, a toggle control. The example shows basic usage with a label and highlights the need for a unique `id` prop for accessibility and functionality. The Switch component is imported from '@/components/starwind/switch'.

```astro
---
import { Switch } from "@/components/starwind/switch";
---

<Switch id="demo-switch" label="Switch" />
```

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

### Install Starwind CLI

Source: https://starwind.dev/docs/components/dropdown

Commands to install the Starwind CLI globally using npm, npx, or yarn. This is the first step to using Starwind components.

```bash
pnpx starwind@latest add dropdown
```

```bash
npx starwind@latest add dropdown
```

```bash
yarn dlx starwind@latest add dropdown
```

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

### InputGroup API Reference Example

Source: https://starwind.dev/docs/components/input-group

Provides a basic example of the InputGroup component, demonstrating its root wrapper functionality for styling borders and focus rings. It shows a simple input field with an addon containing a search icon. This component accepts standard HTML div attributes.

```astro
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <Search />
  </InputGroupAddon>
</InputGroup>
```

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

### Basic Input Component Usage in Astro

Source: https://starwind.dev/llms-full.txt

Shows a simple example of using the Starwind Input component in Astro. The component accepts standard HTML input attributes and a `size` prop for controlling its dimensions. It's designed for easy integration into forms.

```astro
---
import { Input } from "@/components/starwind/input";
---

<Input type="email" placeholder="Email" required />
```

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

### Dialog Component Example (Astro)

Source: https://starwind.dev/llms-full.txt

Illustrates the implementation of the Dialog component for creating modal dialogs. It includes DialogTrigger to open the dialog, DialogContent for the modal's structure, and various sub-components like DialogHeader, DialogFooter, and DialogClose for managing dialog content and actions.

```astro
---
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@/components/starwind/dialog";
import { Button } from "@/components/starwind/button";
---

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Example Dialog</DialogTitle>
      <DialogDescription>
        This is a simple dialog example that demonstrates the basic functionality.
      </DialogDescription>
    </DialogHeader>
    <div class="py-4">Your dialog content goes here.</div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

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

### Basic Native Select Examples

Source: https://starwind.dev/docs/components/native-select

Demonstrates the creation of Native Select components with different sizes ('md' and 'lg') and options. The 'defaultValue' prop sets the initially selected option.

```html
<NativeSelect size="md" class="w-[180px]" defaultValue="">
  <NativeSelectOption value="" disabled>Medium</NativeSelectOption>
  <NativeSelectOption value="one">Option 1</NativeNativeSelectOption>
  <NativeSelectOption value="two">Option 2</NativeSelectOption>
</NativeSelect>
<NativeSelect size="lg" class="w-[180px]" defaultValue="">
  <NativeSelectOption value="" disabled>Large</NativeSelectOption>
  <NativeSelectOption value="one">Option 1</NativeSelectOption>
  <NativeSelectOption value="two">Option 2</NativeSelectOption>
</NativeSelect>
```