🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Item

Item is a versatile component for displaying structured content in lists, grids, or standalone layouts.

The Item component provides a flexible structure for displaying content with consistent spacing, alignment, and visual hierarchy. It presents information with optional media (icons, images, avatars), titles, descriptions, and action elements through composable subcomponents.

Common use cases include notification lists, activity feeds, file browsers, contact lists, product catalogs, or any interface that presents structured information repeatedly. The component supports rendering as different elements via the asChild prop for compatibility with links, buttons, or custom interactive components while maintaining consistent styling.

Example

Documents

Contains all your important files

Photos

Your image collection

Notes

Quick notes and reminders

"use client"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@strongtie/design-system/item"
import { FileText, Folder, Image } from "lucide-react"

export function ItemDefault() {
  return (
    <ItemGroup className="w-[350px]">
      <Item>
        <ItemMedia variant="icon">
          <Folder />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Documents</ItemTitle>
          <ItemDescription>Contains all your important files</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <Image />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Photos</ItemTitle>
          <ItemDescription>Your image collection</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <FileText />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Notes</ItemTitle>
          <ItemDescription>Quick notes and reminders</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Installation


npm install @strongtie/design-system

import { Item } from "@strongtie/design-system/item"

Components

This module exports the following components:

Item
ItemMedia
ItemContent
ItemActions
ItemGroup
ItemSeparator
ItemTitle
ItemDescription
ItemHeader
ItemFooter

Props

`<Item>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| null`	-
`variant`	`"default" \| "outline" \| "muted" \| null`	-

`<ItemMedia>`

Prop	Type	Default	Description
`variant`	`"image" \| "default" \| "icon" \| null`	`default`

Example

Documents

Contains all your important files

Photos

Your image collection

Notes

Quick notes and reminders

"use client"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@strongtie/design-system/item"
import { FileText, Folder, Image } from "lucide-react"

export function ItemDefault() {
  return (
    <ItemGroup className="w-[350px]">
      <Item>
        <ItemMedia variant="icon">
          <Folder />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Documents</ItemTitle>
          <ItemDescription>Contains all your important files</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <Image />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Photos</ItemTitle>
          <ItemDescription>Your image collection</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <FileText />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Notes</ItemTitle>
          <ItemDescription>Quick notes and reminders</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

item

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Input Kbd

On This Page

Example Installation Components Props <Item><ItemMedia>Example Styling Classes Accessibility

Contribute

Item

Item is a versatile component for displaying structured content in lists, grids, or standalone layouts.

Example

Documents

Contains all your important files

Photos

Your image collection

Notes

Quick notes and reminders

"use client"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@strongtie/design-system/item"
import { FileText, Folder, Image } from "lucide-react"

export function ItemDefault() {
  return (
    <ItemGroup className="w-[350px]">
      <Item>
        <ItemMedia variant="icon">
          <Folder />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Documents</ItemTitle>
          <ItemDescription>Contains all your important files</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <Image />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Photos</ItemTitle>
          <ItemDescription>Your image collection</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <FileText />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Notes</ItemTitle>
          <ItemDescription>Quick notes and reminders</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Installation


npm install @strongtie/design-system

import { Item } from "@strongtie/design-system/item"

Components

This module exports the following components:

Item
ItemMedia
ItemContent
ItemActions
ItemGroup
ItemSeparator
ItemTitle
ItemDescription
ItemHeader
ItemFooter

Props

`<Item>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| null`	-
`variant`	`"default" \| "outline" \| "muted" \| null`	-

`<ItemMedia>`

Prop	Type	Default	Description
`variant`	`"image" \| "default" \| "icon" \| null`	`default`

Example

Documents

Contains all your important files

Photos

Your image collection

Notes

Quick notes and reminders

"use client"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@strongtie/design-system/item"
import { FileText, Folder, Image } from "lucide-react"

export function ItemDefault() {
  return (
    <ItemGroup className="w-[350px]">
      <Item>
        <ItemMedia variant="icon">
          <Folder />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Documents</ItemTitle>
          <ItemDescription>Contains all your important files</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <Image />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Photos</ItemTitle>
          <ItemDescription>Your image collection</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <FileText />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Notes</ItemTitle>
          <ItemDescription>Quick notes and reminders</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

item

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Input Kbd

On This Page

Example Installation Components Props <Item><ItemMedia>Example Styling Classes Accessibility

Contribute