Item

A flexible item component that can be used for lists, cards, and more.

Examples

Default

🚀

Launch Project

Deploy your new project to production.

<Item>
  <ItemMedia>
    <div class="h-10 w-10 flex items-center justify-center rounded-full bg-muted">
      <span class="text-xl">🚀</span>
    </div>
  </ItemMedia>
  <ItemContent>
    <ItemHeader>
      <ItemTitle>Launch Project</ItemTitle>
      <ItemDescription>Deploy your new project to production.</ItemDescription>
    </ItemHeader>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">View</Button>
  </ItemActions>
</Item>

Props

Item

Prop	Type	Default	Description
as	string	'div'	The element or component to render as
variant	string	'default'	The variant of the item
size	string	'default'	The size of the item

Slots

Item

Slot	Description
default	The item content

ItemMedia

Slot	Description
default	The media content

ItemContent

Slot	Description
default	The main content

ItemHeader

Slot	Description
default	The header content

ItemTitle

Slot	Description
default	The title content

ItemDescription

Slot	Description
default	The description content

ItemActions

Slot	Description
default	The actions content