Komponen Item pada dasarnya adalah wadah flex sederhana yang bisa memuat konten apa pun. Pakai untuk menampilkan judul, keterangan, dan aksi. Kelompokkan dengan ItemGroup untuk membentuk daftar item.

Hasil serupa sebenarnya bisa dicapai dengan elemen div dan beberapa class. Tapi pola ini terlalu sering dipakai, jadi lebih praktis kalau sudah tersedia sebagai komponen siap pakai.

Basic Item

A simple item with title and description.

Your profile has been verified.

Installation

pnpm dlx shadcn-vue@latest add item

Usage

<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
</script>

<template>
  <Item>
    <ItemHeader>Item Header</ItemHeader>
    <ItemMedia />
    <ItemContent>
      <ItemTitle>Item</ItemTitle>
      <ItemDescription>Item</ItemDescription>
    </ItemContent>
    <ItemFooter>Item Footer</ItemFooter>
  </Item>
</template>

Examples

Varian

Default Variant

Standard styling with subtle background and borders.

Outline Variant

Outlined style with clear borders and transparent background.

Muted Variant

Subdued appearance with muted colors for secondary content.

Ukuran

Komponen Item punya beberapa ukuran untuk kebutuhan berbeda. Ukuran sm cocok untuk item ringkas, sedangkan default untuk item biasa.

Basic Item

A simple item with title and description.

Your profile has been verified.

Icon

Security Alert

New login detected from unknown device.

Avatar

ER

Evil Rabbit

Last seen 5 months ago

CNLRER

No Team Members

Invite your team to collaborate on this project.

Image

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

Grup

s

shadcn

[email protected]

m

maxleiter

[email protected]

e

evilrabbit

[email protected]

Header

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

Link

Untuk menampilkan item sebagai tautan, pakai prop as-child. State hover dan focus akan diterapkan pada elemen anchor-nya.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

Dropdown

API Reference

Item

Komponen utama untuk menampilkan konten beserta media, judul, keterangan, dan aksinya.

Prop	Tipe	Bawaan
variant	"default" | "outline" | "muted"	"default"
size	"default" | "sm"	"default"
as-child	boolean	false

<template>
  <Item size="" variant="">
    <ItemMedia />
    <ItemContent>
      <ItemTitle>Item</ItemTitle>
      <ItemDescription>Item</ItemDescription>
    </ItemContent>
    <ItemActions />
  </Item>
</template>

Pakai prop as-child untuk menampilkan komponen Anda sendiri sebagai item, misalnya sebuah tautan. State hover dan focus akan diterapkan pada komponen tersebut.

<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
</script>

<template>
  <Item as-child>
    <a href="/dashboard">
      <ItemMedia variant="icon">
        <Home />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Dashboard</ItemTitle>
        <ItemDescription>
          Overview of your account and activity.
        </ItemDescription>
      </ItemContent>
    </a>
  </Item>
</template>

ItemGroup

Komponen ItemGroup adalah wadah yang menyatukan item-item terkait dengan tampilan seragam.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemGroup>
    <Item />
    <Item />
  </ItemGroup>
</template>

ItemSeparator

Komponen ItemSeparator adalah pemisah antar item di dalam sebuah item group.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemGroup>
    <Item />
    <ItemSeparator />
    <Item />
  </ItemGroup>
</template>

ItemMedia

Pakai komponen ItemMedia untuk menampilkan media seperti ikon, gambar, atau avatar.

Prop	Tipe	Bawaan
variant	"default" | "icon" | "image"	"default"
class	string

<template>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
</template>

<template>
  <ItemMedia variant="image">
    <img src="..." alt="...">
  </ItemMedia>
</template>

ItemContent

Komponen ItemContent membungkus judul dan keterangan item.

ItemContent boleh dilewati kalau Anda hanya butuh judul saja.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemContent>
    <ItemTitle>Item</ItemTitle>
    <ItemDescription>Item</ItemDescription>
  </ItemContent>
</template>

ItemTitle

Pakai komponen ItemTitle untuk menampilkan judul item.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemTitle>Item Title</ItemTitle>
</template>

ItemDescription

Pakai komponen ItemDescription untuk menampilkan keterangan item.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemDescription>Item description</ItemDescription>
</template>

ItemActions

Pakai komponen ItemActions untuk menampilkan tombol aksi atau elemen interaktif lainnya.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemActions>
    <Button>Action</Button>
    <Button>Action</Button>
  </ItemActions>
</template>

ItemHeader

Pakai komponen ItemHeader untuk menampilkan header di dalam item.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemHeader>Item Header</ItemHeader>
</template>

ItemFooter

Pakai komponen ItemFooter untuk menampilkan footer di dalam item.

Prop	Tipe	Bawaan
class	string

<template>
  <ItemFooter>Item Footer</ItemFooter>
</template>