Components
Item
Composable list item primitives.
Use Item to build consistent list rows with media, content, and actions.
+
Tile UI
A cross-framework component library.
+
Outlined item
Highlighted with the outline variant.
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, Button } from '@tile-ui/react';
export default function ItemDemo() {
return (
<div className="component-preview__stack">
<Item>Registry install
pnpm dlx shadcn@latest add @tile-ui/itemPackage usage
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, Button } from '@tile-ui/react';
<Item>
<ItemMedia>+</ItemMedia>
<ItemContent>
<ItemTitle>Tile UI</ItemTitle>
<ItemDescription>A cross-framework component library.</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm">Open</Button>
</ItemActions>
</Item>Highlights
- Media, content, and actions
- Group and separator
- Default, outline, and muted variants
Registry dependencies
| Item | Purpose |
|---|---|
item | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Item
| Prop | Type | Default |
|---|---|---|
variant | 'default' | 'outline' | 'muted' | — |
size | 'default' | 'sm' | — |
asChild | boolean | — |
ItemMedia
| Prop | Type | Default |
|---|---|---|
variant | 'default' | 'icon' | 'image' | — |