A row that shows one thing: media, a title, a description and an optional action.
FreeWeb and Mobile3 variantsMotion
Preview
npx shadcn add @fetaui/itemSizes
Inbox zeroAll caught up. New mail shows up here.
Inbox zeroAll caught up. New mail shows up here.
Inbox zeroAll caught up
Disabled
Inbox zeroAll caught up. New mail shows up here.
Icon
New sign in from LisbonBrowser on a laptop · 2 min ago
Avatar
Nora PellLast seen 5 months ago
Team
No members yetInvite people to work on this project
Image
Up next
Group
Header
Aster 1.5 smEveryday tasks and UI.
Aster 1.5 lgDeeper reasoning.
Aster 2.0 miniOpen model for all.
Variant
Size
Icons animation
Link
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/item
Sizes
Three heights. Match the Item Tile to the row.
Inbox zeroAll caught up. New mail shows up here.
Inbox zeroAll caught up. New mail shows up here.
Inbox zeroAll caught up
Variant
Disabled
Accessibility
- A navigating Item is a link with the title as its name.
- Actions carry their own labels, like Invite to project.
- Item Group is a list, so screen readers announce the count.
Motion
- Hover fades the wash in over 120 ms, and the chevron moves 2 px and goes to full ink.
- The external arrow moves up and right 2 px.
- Press sinks the row to 0.99 in 80 ms.
- With reduced motion, hover is the wash only and press has no scale.
Responsive behavior
- Rows grow 4 px top and bottom on Mobile for touch.
- Title and description truncate on one line.
Performance
- No Motion and no state. Hover and focus are CSS.
- ItemGroup adds one Separator per row. It has no windowing, so use it for short lists.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Item, ItemTile and ItemGroup. Props: variant, size, media, title, description, action, meta, href, chevron, external, onClick, active, disabled.
- href renders a link and onClick a button, and either way the whole row is the target. action is the only target in a plain row.
- Match ItemTile size to the Item. tone takes a token like var(--feta-status-warning).
- Do not put an action inside a row that has href or onClick: that nests controls.
Related
AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.SeparatorComponentA quiet divider between content: plain rule, fading edges, soft dots, a labelled break or an icon knot.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.Scroll AreaComponentCustom scrolling that keeps the native feel: an overlay bar, edge fades and the Soft tray shell.