Item

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}

---
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>

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>
    </>
  );
}