Item

미디어, 제목, 설명, 작업을 포함해 콘텐츠를 표시하는 범용 컴포넌트입니다.

Basic Item

A simple item with title and description.

examples/krds/item-demo.tsx

import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/item.json

사용법

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

구성

다음 조합으로 Item:

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Item과 Field 비교

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

변형

Use the variant prop to change the visual style of the item.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

examples/krds/item-variant.tsx

import { InboxIcon } from "lucide-react"

import {

크기

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

examples/krds/item-size.tsx

import { InboxIcon } from "lucide-react"

import {

예제

Icon

ItemMedia에 variant="icon"을 사용해 아이콘을 표시합니다.

Security Alert

New login detected from unknown device.

examples/krds/item-icon.tsx

import { ShieldAlertIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Avatar

ItemMedia에 variant="avatar"를 사용해 아바타를 표시할 수 있습니다.

Evil Rabbit

Last seen 5 months ago

CNLRER

No Team Members

Invite your team to collaborate on this project.

examples/krds/item-avatar.tsx

import { Plus } from "lucide-react"

import {

Image

ItemMedia에 variant="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

examples/krds/item-image.tsx

import Image from "next/image"

import {

Group

Use ItemGroup to group related items together.

shadcn

shadcn@vercel.com

maxleiter

maxleiter@vercel.com

evilrabbit

evilrabbit@vercel.com

examples/krds/item-group.tsx

import * as React from "react"
import { PlusIcon } from "lucide-react"

Use ItemHeader to add a header above the item content.

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.

examples/krds/item-header.tsx

import Image from "next/image"

import {

Link

Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

examples/krds/item-link.tsx

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {

<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>

examples/krds/item-dropdown.tsx

"use client"

import { ChevronDownIcon } from "lucide-react"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

عنصر أساسي

عنصر بسيط يحتوي على عنوان ووصف.

تم التحقق من ملفك الشخصي.

examples/krds/item-rtl.tsx

"use client"

import * as React from "react"

API 참조

Item

The main component for displaying content with media, title, description, and actions.

속성	타입	기본값
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`asChild`	`boolean`	`false`

ItemGroup

A container that groups related items together with consistent styling.

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

ItemSeparator

A separator between items in a group.

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

ItemMedia

ItemMedia는 아이콘, 이미지, 아바타 같은 미디어 콘텐츠를 표시합니다.

속성	타입	기본값
`variant`	`"default" \| "icon" \| "image"`	`"default"`

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

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

ItemContent

Wraps the title and description of the item.

<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

Displays the title of the item.

<ItemTitle>Item Title</ItemTitle>

ItemDescription

Displays the description of the item.

<ItemDescription>Item description</ItemDescription>

ItemActions

Container for action buttons or other interactive elements.

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

ItemHeader

Displays a header above the item content.

<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

Displays a footer below the item content.

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>

Input OTP Kbd