데이터와 피드백@neumorphism-ui/card

Card

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

@neumorphism-ui/card

Registry JSON

미리보기

시장 요약

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

실시간

₩72,400+2.41%

함몰 표면

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

설치

npx shadcn@latest add @neumorphism-ui/card

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

Example

<Card variant="raised">
  <CardHeader>
    <CardTitle>Team workspace</CardTitle>
    <CardDescription>공유 토큰으로 함께 작업하세요.</CardDescription>
    <CardAction>
      <Button size="sm">열기</Button>
    </CardAction>
  </CardHeader>
  <CardContent>8명의 멤버가 참여 중입니다.</CardContent>
  <CardFooter>마지막 업데이트: 방금 전</CardFooter>
</Card>

API 레퍼런스

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