Item
A flexible layout primitive for rows of content with media, title, description, and actions.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/item.jsonUsage
Use Item for rows of content that pair an icon or image with a title, description, and actions —
settings rows, file lists, notification entries. Compose multiple items inside ItemGroup, separated
by ItemSeparator, and use variant/size to fit dense or spacious layouts.
<script setup lang="ts">
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,
ItemSeparator,
ItemTitle,
} from "@/components/ui/item";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icons";
</script>
<template>
<ItemGroup>
<Item variant="outline">
<ItemMedia variant="icon">
<Icon icon="shield-check" />
</ItemMedia>
<ItemContent>
<ItemTitle>Two-factor authentication</ItemTitle>
<ItemDescription>Add an extra layer of security to your account.</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm" variant="outline">Enable</Button>
</ItemActions>
</Item>
<ItemSeparator />
</ItemGroup>
</template>