# Shadcn Item

> Open-source shadcn item row components for list rows, settings items, and action rows.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/item
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/item.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/item.md
- MCP: `get_component("item")`, then `get_examples("item")`
- Examples: 12

## When to use

- Rows of people, files, services or events, each an avatar or icon beside text, a badge or a button
- Clickable menus of account pages, mailbox folders or commands, ending in a chevron, count or key
- A compact record card with a header and footer, such as a project with status, team and progress

## When not to use

- A finished dashboard panel of KPIs, transactions or integrations with data on every row: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A whole page of account options in labeled rows, each with its own switch, select or input: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- Rows the user reorders by dragging them up or down the page: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)

## Agent notes

- Make a row a link through `render` on the base twin or `asChild` on radix; every style draws the hover fill only when the row is an anchor
- `ItemGroup` sets `role` list but `Item` sets no listitem role, so wrap each row in an element that carries it
- `ItemTitle` clamps to 1 line and `ItemDescription` to 2, so longer text is cut off until a `className` lifts the clamp

## Examples

- [Variants](https://web.dev.reui.io/components/item/c-item-1.md): Basic item with title and description. Best for the 3 row variants stacked for comparison, default, outline and muted, as text only rows with no media or actions.
- [Icon & Actions](https://web.dev.reui.io/components/item/c-item-2.md): Items with icon media and action buttons. Best for notification channel rows at the default size, each a leading icon and 1 button, outline Configure or filled Enable.
- [User Follow](https://web.dev.reui.io/components/item/c-item-3.md): User item with avatar, info, and follow button. Best for compact people rows with a photo and job title that show the follow button in both states, Follow and Following.
- [Navigation Links](https://web.dev.reui.io/components/item/c-item-4.md): Clickable navigation items with icons and chevron. Best for account menu links, Profile, Security and Billing, where each whole row is an anchor and separators divide them.
- [Status Badges](https://web.dev.reui.io/components/item/c-item-5.md): Item group with status badges. Best for team presence rows in a spaced group, each with a photo, a role and an Online, Away or Offline badge.
- [File Rows](https://web.dev.reui.io/components/item/c-item-6.md): File items with icon media, size, and actions. Best for file rows with size and last update, a Final, Draft or Review badge and an Open button on each.
- [Keyboard Shortcuts](https://web.dev.reui.io/components/item/c-item-7.md): Items with keyboard shortcuts. Best for a narrow command menu of 5 link rows, each an icon and label with its key combination in a Kbd on the right.
- [Small Count Badges](https://web.dev.reui.io/components/item/c-item-8.md): Small-size items with badges. Best for mailbox folder links from Inbox to Trash in a narrow column, with a rounded count badge on Inbox and Drafts only.
- [Team Roles](https://web.dev.reui.io/components/item/c-item-9.md): Team members with roles and multiple actions. Best for member rows with email under the name, a role badge and a dots menu of Change Role, View Profile and Remove.
- [Header & Footer](https://web.dev.reui.io/components/item/c-item-10.md): Item with header and footer sections. Best for a narrow project card: kind label and In Progress badge on top, avatar stack and a 65% progress bar below.
- [Integrations](https://web.dev.reui.io/components/item/c-item-11.md): Integration items with connect actions. Best for data source rows where linked services show a Connected badge and the rest offer a Connect button.
- [Activity Feed](https://web.dev.reui.io/components/item/c-item-12.md): Activity feed items with avatars and actions. Best for a team log of deploys, merges and issues: a small photo, the person, a colored verb badge, the target and a relative time.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.