Tile UI Vue
Source code

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/vue';
 
export default function ItemDemo() {
	return (
		<div class="component-preview__stack">
			<Item>

Registry install

pnpm dlx shadcn@latest add @tile-ui/item

Package usage

import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, Button } from '@tile-ui/vue';
 
<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' —
PreviousInputOtpNextKbd