# Item

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import CircleCheck from "@tabler/icons/outline/circle-check.svg";
import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
---

<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 variant="outline" size="sm" as="a" href="#">
  <ItemMedia>
    <CircleCheck class="size-5" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Your profile has been verified.</ItemTitle>
  </ItemContent>
  <ItemActions>
    <ChevronRight class="size-4" />
  </ItemActions>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import { IconChevronRight, IconCircleCheck } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <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 variant="outline" size="sm" as="a" href="#">
        <ItemMedia>
          <IconCircleCheck className="size-5" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Your profile has been verified.</ItemTitle>
        </ItemContent>
        <ItemActions>
          <IconChevronRight className="size-4" />
        </ItemActions>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemMedia,
} from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import { IconCircleCheck as CircleCheck } from "@tabler/icons-vue";
import { IconChevronRight as ChevronRight } from "@tabler/icons-vue";
</script>

<template>
  <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 variant="outline" size="sm" as="a" href="#">
    <ItemMedia>
      <CircleCheck class="size-5" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Your profile has been verified.</ItemTitle>
    </ItemContent>
    <ItemActions>
      <ChevronRight class="size-4" />
    </ItemActions>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add item --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add item --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add item --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import { Button } from "@/components/starwind/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/starwind/item";
---

<Item variant="outline">
  <ItemContent>
    <ItemTitle>Security review</ItemTitle>
    <ItemDescription>Review the latest sign-in activity.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">Review</Button>
  </ItemActions>
</Item>
```
</div>
<div slot="react">
```tsx
import { Button } from "@/components/starwind/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/starwind/item";

export function Example() {
  return (
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Security review</ItemTitle>
        <ItemDescription>Review the latest sign-in activity.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">Review</Button>
      </ItemActions>
    </Item>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/starwind/item";
</script>

<template>
  <Item variant="outline">
    <ItemContent>
      <ItemTitle>Security review</ItemTitle>
      <ItemDescription>Review the latest sign-in activity.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">Review</Button>
    </ItemActions>
  </Item>
</template>
```
</div>
</FrameworkCodeSwitcher>

## Composition

Use this structure to combine Item content, media, and actions:

```text
ItemGroup
├── Item
│   ├── ItemHeader
│   ├── ItemMedia
│   ├── ItemContent
│   │   ├── ItemTitle
│   │   └── ItemDescription
│   ├── ItemActions
│   └── ItemFooter
├── ItemSeparator
└── Item
```

## Item or Field

Use Item to display content with optional media and actions. Use
[Field](/docs/components/field/) when the row contains a form control such as an input, checkbox,
radio, or select.

## Icon

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import AlertHexagon from "@tabler/icons/outline/alert-hexagon.svg";
---

<Item variant="outline">
  <ItemMedia variant="icon">
    <AlertHexagon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Security Alert</ItemTitle>
    <ItemDescription>New login detected from unknown device.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">Review</Button>
  </ItemActions>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import { IconAlertHexagon as AlertHexagon } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Item variant="outline">
        <ItemMedia variant="icon">
          <AlertHexagon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Security Alert</ItemTitle>
          <ItemDescription>New login detected from unknown device.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">Review</Button>
        </ItemActions>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemMedia,
} from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
import { IconAlertHexagon as AlertHexagon } from "@tabler/icons-vue";
</script>

<template>
  <Item variant="outline">
    <ItemMedia variant="icon">
      <AlertHexagon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Security Alert</ItemTitle>
      <ItemDescription>New login detected from unknown device.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">Review</Button>
    </ItemActions>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Avatar

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } 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";
---

<Item variant="outline">
  <ItemMedia>
    <Avatar >
      <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
      <AvatarFallback>BB</AvatarFallback>
    </Avatar>
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Branden</ItemTitle>
    <ItemDescription>Last seen 5 months ago</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
      <Plus />
    </Button>
  </ItemActions>
</Item>
<Item variant="outline">
  <ItemMedia>
    <div class="flex -space-x-3">
      <Avatar class="hidden sm:flex ">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar class="hidden sm:flex z-1">
        <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar class="z-2">
        <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
        <AvatarFallback>BB</AvatarFallback>
      </Avatar>
    </div>
  </ItemMedia>
  <ItemContent>
    <ItemTitle>No Team Members</ItemTitle>
    <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">Invite</Button>
  </ItemActions>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { IconPlus as Plus } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Item variant="outline">
        <ItemMedia>
          <Avatar >
            <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
            <AvatarFallback>BB</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Branden</ItemTitle>
          <ItemDescription>Last seen 5 months ago</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="icon-sm" variant="outline" className="rounded-full" aria-label="Invite">
            <Plus />
          </Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemMedia>
          <div className="flex -space-x-3">
            <Avatar className="hidden sm:flex ">
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
            <Avatar className="hidden sm:flex z-1">
              <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
              <AvatarFallback>LR</AvatarFallback>
            </Avatar>
            <Avatar className="z-2">
              <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
              <AvatarFallback>BB</AvatarFallback>
            </Avatar>
          </div>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>No Team Members</ItemTitle>
          <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">Invite</Button>
        </ItemActions>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemMedia,
} from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { IconPlus as Plus } from "@tabler/icons-vue";
</script>

<template>
  <Item variant="outline">
    <ItemMedia>
      <Avatar>
        <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
        <AvatarFallback>BB</AvatarFallback>
      </Avatar>
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Branden</ItemTitle>
      <ItemDescription>Last seen 5 months ago</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
        <Plus />
      </Button>
    </ItemActions>
  </Item>
  <Item variant="outline">
    <ItemMedia>
      <div class="flex -space-x-3">
        <Avatar class="hidden sm:flex">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar class="hidden sm:flex z-1">
          <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar class="z-2">
          <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
          <AvatarFallback>BB</AvatarFallback>
        </Avatar>
      </div>
    </ItemMedia>
    <ItemContent>
      <ItemTitle>No Team Members</ItemTitle>
      <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">Invite</Button>
    </ItemActions>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Image

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia, ItemGroup } from "@/components/starwind/item";
---

<ItemGroup class="gap-4">
  <Item variant="outline" as="a" href="#">
    <ItemMedia variant="image">
      <img
        src="https://avatar.vercel.sh/Midnight-City-Lights"
        alt="Midnight City Lights"
        class="object-cover grayscale"
      />
    </ItemMedia>
    <ItemContent>
      <ItemTitle class="line-clamp-1">
        Midnight City Lights - <span class="text-muted-foreground">Electric Nights</span>
      </ItemTitle>
      <ItemDescription>Neon Dreams</ItemDescription>
    </ItemContent>
    <ItemContent class="flex-none text-center">
      <ItemDescription>3:45</ItemDescription>
    </ItemContent>
  </Item>
  <!-- More items... -->
</ItemGroup>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia, ItemGroup } from "@/components/starwind/item";

export function Example() {
  return (
    <>
      <ItemGroup className="gap-4">
        <Item variant="outline" as="a" href="#">
          <ItemMedia variant="image">
            <img
              src="https://avatar.vercel.sh/Midnight-City-Lights"
              alt="Midnight City Lights"
              className="object-cover grayscale"
            />
          </ItemMedia>
          <ItemContent>
            <ItemTitle className="line-clamp-1">
              Midnight City Lights - <span className="text-muted-foreground">Electric Nights</span>
            </ItemTitle>
            <ItemDescription>Neon Dreams</ItemDescription>
          </ItemContent>
          <ItemContent className="flex-none text-center">
            <ItemDescription>3:45</ItemDescription>
          </ItemContent>
        </Item>
        {/* More items... */}
      </ItemGroup>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemMedia,
  ItemGroup,
} from "@/components/starwind/item";
</script>

<template>
  <ItemGroup class="gap-4">
    <Item variant="outline" as="a" href="#">
      <ItemMedia variant="image">
        <img
          src="https://avatar.vercel.sh/Midnight-City-Lights"
          alt="Midnight City Lights"
          class="object-cover grayscale"
        />
      </ItemMedia>
      <ItemContent>
        <ItemTitle class="line-clamp-1">
          Midnight City Lights - <span class="text-muted-foreground">Electric Nights</span>
        </ItemTitle>
        <ItemDescription>Neon Dreams</ItemDescription>
      </ItemContent>
      <ItemContent class="flex-none text-center">
        <ItemDescription>3:45</ItemDescription>
      </ItemContent>
    </Item>
    <!-- More items... -->
  </ItemGroup>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Variants

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
---

<Item>
  <ItemContent>
    <ItemTitle>Default Variant</ItemTitle>
    <ItemDescription>
      Standard styling with subtle background and borders.
    </ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Open</Button>
  </ItemActions>
</Item>

<Item variant="outline">
  <ItemContent>
    <ItemTitle>Outline Variant</ItemTitle>
    <ItemDescription>
      Outlined style with clear borders and transparent background.
    </ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Open</Button>
  </ItemActions>
</Item>

<Item variant="muted">
  <ItemContent>
    <ItemTitle>Muted Variant</ItemTitle>
    <ItemDescription>
      Subdued appearance with muted colors for secondary content.
    </ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Open</Button>
  </ItemActions>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Item>
        <ItemContent>
          <ItemTitle>Default Variant</ItemTitle>
          <ItemDescription>
            Standard styling with subtle background and borders.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Open</Button>
        </ItemActions>
      </Item>

      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Outline Variant</ItemTitle>
          <ItemDescription>
            Outlined style with clear borders and transparent background.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Open</Button>
        </ItemActions>
      </Item>

      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Muted Variant</ItemTitle>
          <ItemDescription>
            Subdued appearance with muted colors for secondary content.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Open</Button>
        </ItemActions>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from "@/components/starwind/item";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Item>
    <ItemContent>
      <ItemTitle>Default Variant</ItemTitle>
      <ItemDescription> Standard styling with subtle background and borders. </ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="outline" size="sm">Open</Button>
    </ItemActions>
  </Item>

  <Item variant="outline">
    <ItemContent>
      <ItemTitle>Outline Variant</ItemTitle>
      <ItemDescription>
        Outlined style with clear borders and transparent background.
      </ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="outline" size="sm">Open</Button>
    </ItemActions>
  </Item>

  <Item variant="muted">
    <ItemContent>
      <ItemTitle>Muted Variant</ItemTitle>
      <ItemDescription>
        Subdued appearance with muted colors for secondary content.
      </ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="outline" size="sm">Open</Button>
    </ItemActions>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Sizes

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription } from "@/components/starwind/item";
---

<Item variant="outline" size="md">
  <ItemContent>
    <ItemTitle>Medium Size</ItemTitle>
    <ItemDescription>The default padding and spacing for most use cases.</ItemDescription>
  </ItemContent>
</Item>

<Item variant="outline" size="sm">
  <ItemContent>
    <ItemTitle>Small Size</ItemTitle>
    <ItemDescription>Compact padding for dense layouts.</ItemDescription>
  </ItemContent>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription } from "@/components/starwind/item";

export function Example() {
  return (
    <>
      <Item variant="outline" size="md">
        <ItemContent>
          <ItemTitle>Medium Size</ItemTitle>
          <ItemDescription>The default padding and spacing for most use cases.</ItemDescription>
        </ItemContent>
      </Item>

      <Item variant="outline" size="sm">
        <ItemContent>
          <ItemTitle>Small Size</ItemTitle>
          <ItemDescription>Compact padding for dense layouts.</ItemDescription>
        </ItemContent>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Item, ItemContent, ItemTitle, ItemDescription } from "@/components/starwind/item";
</script>

<template>
  <Item variant="outline" size="md">
    <ItemContent>
      <ItemTitle>Medium Size</ItemTitle>
      <ItemDescription>The default padding and spacing for most use cases.</ItemDescription>
    </ItemContent>
  </Item>

  <Item variant="outline" size="sm">
    <ItemContent>
      <ItemTitle>Small Size</ItemTitle>
      <ItemDescription>Compact padding for dense layouts.</ItemDescription>
    </ItemContent>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Group

<FrameworkCodeSwitcher>
  <div slot="astro">
```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";
---

<ItemGroup>
  <Item>
    <ItemMedia>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </ItemMedia>
    <ItemContent class="gap-1">
      <ItemTitle>shadcn</ItemTitle>
      <ItemDescription>shadcn@vercel.com</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="ghost" size="icon" class="rounded-full">
        <Plus />
      </Button>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <!-- More items... -->
</ItemGroup>
```
  </div>
  <div slot="react">
```tsx
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 { IconPlus as Plus } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ItemGroup>
        <Item>
          <ItemMedia>
            <Avatar>
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent className="gap-1">
            <ItemTitle>shadcn</ItemTitle>
            <ItemDescription>shadcn@vercel.com</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="ghost" size="icon" className="rounded-full">
              <Plus />
            </Button>
          </ItemActions>
        </Item>
        <ItemSeparator />
        {/* More items... */}
      </ItemGroup>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
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 { IconPlus as Plus } from "@tabler/icons-vue";
</script>

<template>
  <ItemGroup>
    <Item>
      <ItemMedia>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
      </ItemMedia>
      <ItemContent class="gap-1">
        <ItemTitle>shadcn</ItemTitle>
        <ItemDescription>shadcn@vercel.com</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="ghost" size="icon" class="rounded-full">
          <Plus />
        </Button>
      </ItemActions>
    </Item>
    <ItemSeparator />
    <!-- More items... -->
  </ItemGroup>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Header

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemHeader, ItemGroup } from "@/components/starwind/item";
---

<ItemGroup class="grid grid-cols-3 gap-4">
  <Item variant="outline">
    <ItemHeader>
      <img
        src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
        alt="v0-1.5-sm"
        class="aspect-square w-full rounded-sm object-cover"
      />
    </ItemHeader>
    <ItemContent>
      <ItemTitle>v0-1.5-sm</ItemTitle>
      <ItemDescription>Everyday tasks and UI generation.</ItemDescription>
    </ItemContent>
  </Item>
  <!-- More items... -->
</ItemGroup>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemHeader, ItemGroup } from "@/components/starwind/item";

export function Example() {
  return (
    <>
      <ItemGroup className="grid grid-cols-3 gap-4">
        <Item variant="outline">
          <ItemHeader>
            <img
              src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
              alt="v0-1.5-sm"
              className="aspect-square w-full rounded-sm object-cover"
            />
          </ItemHeader>
          <ItemContent>
            <ItemTitle>v0-1.5-sm</ItemTitle>
            <ItemDescription>Everyday tasks and UI generation.</ItemDescription>
          </ItemContent>
        </Item>
        {/* More items... */}
      </ItemGroup>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemGroup,
} from "@/components/starwind/item";
</script>

<template>
  <ItemGroup class="grid grid-cols-3 gap-4">
    <Item variant="outline">
      <ItemHeader>
        <img
          src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
          alt="v0-1.5-sm"
          class="aspect-square w-full rounded-sm object-cover"
        />
      </ItemHeader>
      <ItemContent>
        <ItemTitle>v0-1.5-sm</ItemTitle>
        <ItemDescription>Everyday tasks and UI generation.</ItemDescription>
      </ItemContent>
    </Item>
    <!-- More items... -->
  </ItemGroup>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Link

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/components/starwind/item";
import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
import ExternalLink from "@tabler/icons/outline/external-link.svg";
---

<Item as="a" href="#">
  <ItemContent>
    <ItemTitle>Visit our documentation</ItemTitle>
    <ItemDescription>Learn how to get started with our components.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <ChevronRight class="size-4" />
  </ItemActions>
</Item>

<Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
  <ItemContent>
    <ItemTitle>External resource</ItemTitle>
    <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <ExternalLink class="size-4" />
  </ItemActions>
</Item>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/components/starwind/item";
import { IconChevronRight as ChevronRight } from "@tabler/icons-react";
import { IconExternalLink as ExternalLink } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Item as="a" href="#">
        <ItemContent>
          <ItemTitle>Visit our documentation</ItemTitle>
          <ItemDescription>Learn how to get started with our components.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <ChevronRight className="size-4" />
        </ItemActions>
      </Item>

      <Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
        <ItemContent>
          <ItemTitle>External resource</ItemTitle>
          <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <ExternalLink className="size-4" />
        </ItemActions>
      </Item>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from "@/components/starwind/item";
import { IconChevronRight as ChevronRight } from "@tabler/icons-vue";
import { IconExternalLink as ExternalLink } from "@tabler/icons-vue";
</script>

<template>
  <Item as="a" href="#">
    <ItemContent>
      <ItemTitle>Visit our documentation</ItemTitle>
      <ItemDescription>Learn how to get started with our components.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <ChevronRight class="size-4" />
    </ItemActions>
  </Item>

  <Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
    <ItemContent>
      <ItemTitle>External resource</ItemTitle>
      <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <ExternalLink class="size-4" />
    </ItemActions>
  </Item>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Dropdown

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia } from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
---

<Dropdown>
  <DropdownTrigger asChild>
    <Button variant="outline" size="sm" class="w-fit">
      Select
      <ChevronDown />
    </Button>
  </DropdownTrigger>
  <DropdownContent class="min-w-60" align="end">
    <DropdownItem class="p-0">
      <Item size="sm" class="w-full p-2">
        <ItemMedia>
          <Avatar class="size-8">
            <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
            <AvatarFallback>BB</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent class="gap-0.5">
          <ItemTitle>Branden</ItemTitle>
          <ItemDescription>Creator of Starwind UI</ItemDescription>
        </ItemContent>
      </Item>
    </DropdownItem>
    <!-- More items... -->
  </DropdownContent>
</Dropdown>
```
  </div>
  <div slot="react">
```tsx
import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia } from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
import { IconChevronDown as ChevronDown } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Dropdown>
        <DropdownTrigger asChild>
          <Button variant="outline" size="sm" className="w-fit">
            Select
            <ChevronDown />
          </Button>
        </DropdownTrigger>
        <DropdownContent className="min-w-60" align="end">
          <DropdownItem className="p-0">
            <Item size="sm" className="w-full p-2">
              <ItemMedia>
                <Avatar className="size-8">
                  <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
                  <AvatarFallback>BB</AvatarFallback>
                </Avatar>
              </ItemMedia>
              <ItemContent className="gap-0.5">
                <ItemTitle>Branden</ItemTitle>
                <ItemDescription>Creator of Starwind UI</ItemDescription>
              </ItemContent>
            </Item>
          </DropdownItem>
          {/* More items... */}
        </DropdownContent>
      </Dropdown>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import {
  Item,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemMedia,
} from "@/components/starwind/item";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
} from "@/components/starwind/dropdown";
import { IconChevronDown as ChevronDown } from "@tabler/icons-vue";
</script>

<template>
  <Dropdown>
    <DropdownTrigger asChild>
      <button
        type="button"
        :class="ButtonVariants.button({ variant: 'outline', size: 'sm', class: 'w-fit' })"
      >
        Select
        <ChevronDown />
      </button>
    </DropdownTrigger>
    <DropdownContent class="min-w-60" align="end">
      <DropdownItem class="p-0">
        <Item size="sm" class="w-full p-2">
          <ItemMedia>
            <Avatar class="size-8">
              <AvatarImage src="https://github.com/Boston343.png" alt="@boston343builds" />
              <AvatarFallback>BB</AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent class="gap-0.5">
            <ItemTitle>Branden</ItemTitle>
            <ItemDescription>Creator of Starwind UI</ItemDescription>
          </ItemContent>
        </Item>
      </DropdownItem>
      <!-- More items... -->
    </DropdownContent>
  </Dropdown>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## API Reference
### Item
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `as` | `keyof HTMLElementTagNameMap` | No | `"div"` | Wrapper prop | Selects the rendered element or component. |
| `size` | `"sm" \| "md"` | No | `"md"` | Styled variant | Selects the component's visual size. |
| `variant` | `"default" \| "outline" \| "muted"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits a attributes. Omits `type`.
- Inherits div attributes.

### ItemActions
- Inherits div attributes.

### ItemContent
- Inherits div attributes.

### ItemDescription
- Inherits p attributes.

### ItemFooter
- Inherits div attributes.

### ItemGroup
- Inherits div attributes.

### ItemHeader
- Inherits div attributes.

### ItemMedia
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `variant` | `"default" \| "icon" \| "image"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits div attributes.

### ItemSeparator
- Inherits Separator props.

### ItemTitle
- Inherits div attributes.

## Changelog

### v1.2.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v1.2.0

- Renamed the standard Item size from `default` to `md`. Omitting `size` keeps the same medium spacing.

### v1.1.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v1.0.3

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.0.0

- Initial release with starwind v1.10.0