Card

요약 정보, 설정 영역, 콘텐츠와 관련 동작을 독립적인 묶음으로 보여 줄 때 사용합니다.

미리보기

시장 요약과 함몰 정보

실시간 배지와 상세 버튼이 있는 raised 시장 카드, 목표 진행률을 담은 inset 카드를 비교합니다.

시장 요약

오늘 관심 종목의 흐름을 한눈에 확인하세요.

실시간

₩72,400+2.41%

함몰 표면

보조 정보에는 눌린 깊이를 적용할 수 있습니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/card

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

시장 요약과 함몰 정보

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/button @neumorphism-ui/card @neumorphism-ui/progress

Registry JSON

사용법

CardHeader 안에 CardTitle과 CardDescription을 두세요. 주요 내용은 CardContent에, 보조 동작이나 메타 정보는 CardAction 또는 CardFooter에 배치합니다.

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader><CardTitle>Team workspace</CardTitle></CardHeader>
      <CardContent>Invite your team and start a project.</CardContent>
    </Card>
  );
}

API 레퍼런스

Header, Title, Description, Action, Content, Footer를 조합하는 레이아웃 컴포넌트입니다. 기본 root는 div이므로 콘텐츠의 의미에 맞춰 제목과 상호작용 요소를 구성합니다.

컴포넌트	속성	타입	기본값	설명
`Card`	`variant`	`"raised" \| "accent" \| "soft" \| "inset" \| "flat"`	`"raised"`	표면의 깊이와 테두리 표현을 선택합니다.
`Card`	`children`필수	`React.ReactNode`	`—`	Card의 조합형 하위 요소를 배치합니다.
`CardAction`	`children`	`React.ReactNode`	`—`	Header 우측의 행동 또는 상태 영역입니다.
`CardTitle`	`children`필수	`React.ReactNode`	`—`	기본 h3로 렌더링되는 Card 제목입니다.

미리보기

시장 요약과 함몰 정보

시장 요약

함몰 표면

설치

사용법

API 레퍼런스

접근성