Item

<Item variant="outline" class="w-full max-w-md">
  <ItemMedia><Avatar><AvatarFallback>RB</AvatarFallback></Avatar></ItemMedia>
  <ItemContent>
    <ItemTitle>Railbase</ItemTitle>
    <ItemDescription>A backend platform in a single binary.</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">Open</Button></ItemActions>
</Item>

A flexible list-row layout: media, content, and actions with variants.

Installation

railbase ui add item

Peer dependencies:

npm install class-variance-authority

Usage

import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/lib/ui/item";

<Item variant="outline">
  <ItemMedia><Avatar /></ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description.</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">Open</Button></ItemActions>
</Item>

Anatomy

Exported parts: Item · ItemMedia · ItemContent · ItemTitle · ItemDescription · ItemActions · ItemFooter · ItemGroup · ItemSeparator