Item

Import

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@timelycare/helix-ui"

Props

interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "outline"
  size?: "default" | "sm"
  asChild?: boolean
  className?: string
  children: React.ReactNode
}

interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "icon"
  className?: string
  children: React.ReactNode
}

interface ItemContentProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface ItemTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
  children: React.ReactNode
}

interface ItemDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
  children: React.ReactNode
}

interface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface ItemGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface ItemSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
}

Styling

Container

Typography

Media

Variants

Sizes

Sub-Components

Common Patterns

Basic Item

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

With Icon

<Item variant="outline">
  <ItemMedia variant="icon">
    <ShieldAlertIcon />
  </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>

With Avatar

<Item variant="outline">
  <ItemMedia>
    <Avatar className="size-10">
      <AvatarImage src="/user.png" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Jane Doe</ItemTitle>
    <ItemDescription>Last seen 5 minutes ago</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="icon-sm" variant="outline" className="rounded-full" aria-label="Add">
      <PlusIcon />
    </Button>
  </ItemActions>
</Item>

As Link

<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>

Item List with Separators

<ItemGroup>
  {users.map((user, index) => (
    <React.Fragment key={user.id}>
      <Item>
        <ItemMedia>
          <Avatar>
            <AvatarImage src={user.avatar} />
            <AvatarFallback>{user.initials}</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{user.name}</ItemTitle>
          <ItemDescription>{user.email}</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="ghost" size="icon" className="rounded-full">
            <PlusIcon />
          </Button>
        </ItemActions>
      </Item>
      {index !== users.length - 1 && <ItemSeparator />}
    </React.Fragment>
  ))}
</ItemGroup>

Compact Size

<Item variant="outline" size="sm" asChild>
  <a href="/verified">
    <ItemMedia>
      <BadgeCheckIcon className="size-5" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Your profile has been verified.</ItemTitle>
    </ItemContent>
    <ItemActions>
      <ChevronRightIcon className="size-4" />
    </ItemActions>
  </a>
</Item>

Accessibility

• When used as a link (asChild with <a>), inherits link semantics automatically
• ItemActions buttons should have appropriate aria-label for icon-only actions
• For lists, wrap in a semantic <ul> / <li> structure or use ARIA role="list" / role="listitem"
• Keyboard: Tab navigates between interactive items; Enter/Space activates links and buttons

Gotchas

See Also

• Related Components: Card (richer container), Avatar (user images), Empty (no-data state for lists), Sidebar (navigation items)
• Tokens: Colors — foreground, muted-foreground, border tokens

Last updated: February 19, 2026