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 kliping@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

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	class-variance-authority@^0.7.1, reka-ui@^2.10.3
Kliping items	separator
Files	components/ui/item/item.vue components/ui/item/item-actions.vue components/ui/item/item-content.vue components/ui/item/item-description.vue components/ui/item/item-footer.vue components/ui/item/item-group.vue components/ui/item/item-header.vue components/ui/item/item-media.vue components/ui/item/item-separator.vue components/ui/item/item-title.vue components/ui/item/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Item>
  <ItemMedia />
  <ItemContent>
    <ItemTitle />
    <ItemDescription />
  </ItemContent>
  <ItemActions />
  <ItemFooter />
</Item>
<ItemGroup>
  <Item>
    <ItemMedia />
    <ItemContent>
      <ItemTitle />
      <ItemDescription />
    </ItemContent>
    <ItemActions />
    <ItemHeader />
  </Item>
  <ItemSeparator />
</ItemGroup>

API Reference

Item

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

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.
variant?	"default" | "outline" | "muted"	—	The visual style.
size?	"default" | "sm"	—	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item"
[data-variant]	"default" | "outline" | "muted"
[data-size]	"default" | "sm"

<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.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-group"

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

ItemSeparator

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

Prop	Type	Default	Description
orientation?	DataOrientation	—	Orientation of the component. Either vertical or horizontal. Defaults to horizontal.
decorative?	boolean	—	Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"item-separator"

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

ItemMedia

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

Prop	Type	Default	Description
variant?	"default" | "icon" | "image"	—	The visual style.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-media"
[data-variant]	"default" | "icon" | "image"

<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.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-content"

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

ItemTitle

Pakai komponen ItemTitle untuk menampilkan judul item.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-title"

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

ItemDescription

Pakai komponen ItemDescription untuk menampilkan keterangan item.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-description"

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

ItemActions

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-actions"

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

ItemHeader

Pakai komponen ItemHeader untuk menampilkan header di dalam item.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-header"

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

ItemFooter

Pakai komponen ItemFooter untuk menampilkan footer di dalam item.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"item-footer"

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

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --border, --muted, --muted-foreground, --primary, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.