Displayreadycomponentready

Item

A flexible row primitive for media, title, description, metadata, actions, linked rows, grouped lists, and composed menu content.

Importimport { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from 'radcn/item'

Preview

Live package example

Compose avatar rows, linked rows, dropdown menu rows, grouped lists, header image cards, icon media, image media, sizes, and variants with package primitives.

Example Parity

Compose avatar rows, linked rows, dropdown menu rows, grouped lists, header image cards, icon media, image media, sizes, and variants with package primitives.

Preview

Ada Radley

Avatar media and icon-only invite action.

Verified profile

Explicit href replaces shadcn asChild and Radix Slot.

Alex Lee

Repeated rows are app/server-owned mapping.

Header image card

Native docs-owned WebP image.

Static asset

Security alert

Icon media stays presentation-owned.

Neon server

Image row with local media.

3:42

Duration

External reference

Native external link attributes.

RCUI

Stacked reviewers

Default size

Variant matrix row.

Small muted item

Size and variant row.

import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from 'radcn/avatar'
import { Button } from 'radcn/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'radcn/dropdown-menu'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from 'radcn/item'

export function ItemPreview() {
  return (
    <ItemGroup>
      <Item variant="outline">
        <ItemMedia><Avatar><AvatarFallback>AR</AvatarFallback></Avatar></ItemMedia>
        <ItemContent>
          <ItemTitle>Ada Radley</ItemTitle>
          <ItemDescription>Avatar media inside an Item row.</ItemDescription>
        </ItemContent>
        <ItemActions><Button ariaLabel="Invite Ada Radley" size="icon-sm">+</Button></ItemActions>
      </Item>

      <Item href="/docs/components/item" size="sm" variant="outline">
        <ItemMedia variant="icon">OK</ItemMedia>
        <ItemContent>
          <ItemTitle>Verified profile</ItemTitle>
          <ItemDescription>RadCN uses href instead of shadcn asChild.</ItemDescription>
        </ItemContent>
      </Item>

      <ItemSeparator />

      <Item href="https://example.com/radcn" rel="noreferrer" target="_blank" variant="muted">
        <ItemMedia variant="image"><img alt="RadCN mark" src="/images/radcn-1-96.webp" /></ItemMedia>
        <ItemContent>
          <ItemTitle>External reference</ItemTitle>
          <ItemDescription>Native anchors keep external attributes.</ItemDescription>
        </ItemContent>
        <ItemContent><ItemTitle>4:08</ItemTitle><ItemDescription>Duration</ItemDescription></ItemContent>
      </Item>

      <Item variant="outline">
        <ItemHeader><img alt="RadCN robot" src="/images/radcn-1-300.webp" /></ItemHeader>
        <ItemContent><ItemTitle>Header image card</ItemTitle></ItemContent>
        <ItemFooter><span>Local WebP asset</span></ItemFooter>
      </Item>

      <Item variant="outline">
        <ItemMedia>
          <AvatarGroup ariaLabel="Review team">
            <Avatar size="sm"><AvatarFallback>RC</AvatarFallback></Avatar>
            <Avatar size="sm"><AvatarFallback>UI</AvatarFallback></Avatar>
            <AvatarGroupCount>+2</AvatarGroupCount>
          </AvatarGroup>
        </ItemMedia>
        <ItemContent><ItemTitle>Grouped reviewers</ItemTitle></ItemContent>
      </Item>

      <DropdownMenu>
        <DropdownMenuTrigger>Teams</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Item size="sm"><ItemContent><ItemTitle>RadCN Core</ItemTitle></ItemContent></Item>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </ItemGroup>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from 'radcn/item'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

ItemGroup renders role="list" and Item renders role="listitem" so grouped rows have list semantics in server HTML.
Linked Items keep the Item row wrapper as the listitem and render a native nested anchor through href, target, rel, and rmxDocument.
Icon-only actions remain Button responsibilities and should use ariaLabel for accessible names.
Avatar, DropdownMenu, Button, and Separator keep their own accessible semantics when composed inside Item.

Customization

Item exposes public row, link, media, content, title, description, actions, header, footer, separator, size, and variant hooks.
Use ItemMedia variant="icon" or variant="image" for visual affordances while keeping icon and image sources app-owned.
Secondary metadata can be another ItemContent block beside the primary content, matching upstream duration and detail rows.
Grouped rows, separators, card-like headers, and action clusters are composition over the same package parts.

Remix 3 Notes

shadcn/ui Item examples use asChild and Radix Slot for link rows; RadCN maps those to an explicit href API with a row wrapper plus native anchor.
React fragments and arrays map to server-rendered repeated rows or app-owned data mapping outside the Item package.
Next Image and remote image URLs are not RadCN dependencies; docs use native img elements and local WebP assets.
Lucide and other icon packages are presentation choices for consuming apps, not Item package requirements.
Item remains a layout/content primitive and does not own dropdown, avatar, button, separator, image loading, icon, or repeated-list state.