Item

since 1.2

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

Example

Variant

Size

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

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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`

Variants

size

defaultsm

variant

defaultoutlinemuted

Input Kbd

On This Page

Example Install Components Props <Item><ItemMedia>Variants

Contribute