Item

설치 확인

아이콘·제목·설명·동작이 있는 목록 행

1. 목적과 출처

아이콘·제목·설명·동작이 있는 목록 행

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/item.tsx
Registry: @adcapsule/item

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Item 변형
variant	모양
default	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
outline	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
muted	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
묶음 ItemGroup	민 로그인 화면의 오류 메시지 개선 ADX-101 지 모바일 사이드바 인터랙션 검토 ADX-104 준 워크스페이스 멤버 초대 화면 ADX-106

3. 속성 바꿔 보기

토큰 규칙

원시값 → 의미 → 컴포넌트 3단 구조

variant

size

아이콘동작

<Item variant="outline">
  <ItemMedia variant="icon"><FileText /></ItemMedia>
  <ItemContent>
    <ItemTitle>토큰 규칙</ItemTitle>
    <ItemDescription>원시값 → 의미 → 컴포넌트 3단 구조</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm" variant="outline">열기</Button></ItemActions>
</Item>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/item

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/separator, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Item variant="outline">
  <ItemMedia variant="icon"><FileText /></ItemMedia>
  <ItemContent>
    <ItemTitle>토큰 규칙</ItemTitle>
    <ItemDescription>3단 구조</ItemDescription>
  </ItemContent>
  <ItemActions>…</ItemActions>
</Item>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

variant: default·outline·muted
size: default·sm·xs
ItemMedia variant: default·icon·image
ItemGroup·ItemSeparator로 목록
render로 링크처럼

공통으로 유지할 토큰

border.default (outline)
surface.raised (muted)
radius.lg (10px)

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Item 변형
variant	모양
default	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
outline	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
muted	토큰 규칙 원시값 → 의미 → 컴포넌트 3단 구조
묶음 ItemGroup	민 로그인 화면의 오류 메시지 개선 ADX-101 지 모바일 사이드바 인터랙션 검토 ADX-104 준 워크스페이스 멤버 초대 화면 ADX-106

3. 속성 바꿔 보기

토큰 규칙

원시값 → 의미 → 컴포넌트 3단 구조

variant

size

아이콘동작

<Item variant="outline">
  <ItemMedia variant="icon"><FileText /></ItemMedia>
  <ItemContent>
    <ItemTitle>토큰 규칙</ItemTitle>
    <ItemDescription>원시값 → 의미 → 컴포넌트 3단 구조</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm" variant="outline">열기</Button></ItemActions>
</Item>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/item

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/separator, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Item variant="outline">
  <ItemMedia variant="icon"><FileText /></ItemMedia>
  <ItemContent>
    <ItemTitle>토큰 규칙</ItemTitle>
    <ItemDescription>3단 구조</ItemDescription>
  </ItemContent>
  <ItemActions>…</ItemActions>
</Item>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿