Everyday

Playground

Item

ui
control

Compound list item with media, content, title, description, and actions

Settings rows, list entries, navigation items, data rows

import { Item } from "@everydayos/ui";

Usage

Item with icon, title, description, and actions

<ItemGroup>
  <Item>
    <ItemMedia variant="icon">
      <SettingsIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Settings</ItemTitle>
      <ItemDescription>Manage your preferences</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="ghost" size="sm">Edit</Button>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <Item variant="muted" size="sm">
    <ItemContent>
      <ItemTitle>Notifications</ItemTitle>
    </ItemContent>
    <ItemActions>
      <Switch />
    </ItemActions>
  </Item>
</ItemGroup>

API

variant
Default: default
defaultoutlinemuted
defaultpreferredrare
size
Default: default
smdefaultlg
defaultpreferredrare
interactive
truefalse

Examples

Interactive Item

Clickable item with hover highlight

<ItemGroup>
  <Item interactive onClick={() => {}}>
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>View your home overview</ItemDescription>
    </ItemContent>
  </Item>
  <ItemSeparator />
  <Item interactive onClick={() => {}}>
    <ItemMedia variant="icon">
      <ZapIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Energy</ItemTitle>
      <ItemDescription>Monitor energy usage</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>

Large Item

Spacious item for premium/marketing contexts

<Item size="lg" variant="muted">
  <ItemMedia variant="image">
    <img src="/placeholder.jpg" alt="Product" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Air^ Climate System</ItemTitle>
    <ItemDescription>Intelligent heating and cooling for your home</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm">Learn more</Button>
  </ItemActions>
</Item>

Composition

Pairs well with

ItemGroup
ItemSeparator
Stack
Button
Switch

When to avoid

  • Need simple list — use List or Stack with Text
  • Need card layout — use Card or Surface instead

Patterns

Settings Row

Item
ItemContent
ItemTitle
ItemActions

Single setting with label, description, and control

<Item>
  <ItemContent>
    <ItemTitle>Setting name</ItemTitle>
    <ItemDescription>Optional description</ItemDescription>
  </ItemContent>
  <ItemActions><Switch /></ItemActions>
</Item>