Item

A generic list/menu item component with composable sub-components for building notification feeds, settings lists, team rosters, and more.

Notification

You have a new message from the team.

variant

default

outline

muted

size

default

#Installation

bunx --bun barefoot add item

#Usage

New comment

Alice replied to your post.

Team update

Sprint review notes available.

1import {2  Item, ItemGroup, ItemSeparator,3  ItemContent, ItemTitle, ItemDescription,4  ItemMedia, ItemActions,5} from "@/components/ui/item"67function NotificationList() {8  return (9    <ItemGroup>10      <Item>11        <ItemContent>12          <ItemTitle>New comment</ItemTitle>13          <ItemDescription>Alice replied to your post.</ItemDescription>14        </ItemContent>15      </Item>16      <ItemSeparator />17      <Item>18        <ItemContent>19          <ItemTitle>Team update</ItemTitle>20          <ItemDescription>Sprint review notes available.</ItemDescription>21        </ItemContent>22      </Item>23    </ItemGroup>24  )25}

#Examples

#Variants

Default

Transparent background.

Outline

Visible border.

Muted

Subtle background.

<Item variant="default">...</Item>
<Item variant="outline">...</Item>
<Item variant="muted">...</Item>

#Sizes

Default size

Standard padding and gap.

Small size

Compact padding and gap.

<Item size="default">...</Item>
<Item size="sm">...</Item>

#With Media

With icon media

Icon container with border and muted background.

With image media

Image container with cover fit.

1<Item>2  <ItemMedia variant="icon">3    <BellIcon />4  </ItemMedia>5  <ItemContent>6    <ItemTitle>With icon media</ItemTitle>7    <ItemDescription>Icon container with border.</ItemDescription>8  </ItemContent>9</Item>10<Item>11  <ItemMedia variant="image">12    <img src="..." alt="Avatar" />13  </ItemMedia>14  <ItemContent>15    <ItemTitle>With image media</ItemTitle>16    <ItemDescription>Image container with cover fit.</ItemDescription>17  </ItemContent>18</Item>

#With Actions

Notifications

Receive push notifications.

1<Item variant="outline">2  <ItemContent>3    <ItemTitle>Notifications</ItemTitle>4    <ItemDescription>Receive push notifications.</ItemDescription>5  </ItemContent>6  <ItemActions>7    <Button size="sm">On</Button>8  </ItemActions>9</Item>

#Settings List

Notifications

Receive push notifications for new messages.

Dark Mode

Switch between light and dark theme.

Language

Choose your preferred language.

English

#API Reference

Item

Prop	Type	Default	Description
variant	'default' \| 'outline' \| 'muted'	'default'	The visual style of the item.
size	'default' \| 'sm'	'default'	The size of the item.
children	Child	-	The content of the item (typically ItemMedia, ItemContent, ItemActions).

ItemMedia

Prop	Type	Default	Description
variant	'default' \| 'icon' \| 'image'	'default'	The visual style of the media container.
children	Child	-	The media content (SVG icon or img element).