Contents

Card

Compound API로 자유롭게 조합하는 카드 컨테이너.

내부 컴포넌트(Header / Title / Description / Body / Actions)는 모두 옵셔널. 본문 색은 opacity-80/85로 부모 색을 상속해 일반/그라디언트 카드 어디서나 가독성 자동.

import { Card } from "@nxtgen-org/react";

Variants

3 variants

Outlined

기본. 가장 자주 쓰는 패턴.

Elevated

그림자. 호버시 강조.

Ghost + Gradient

AI/프리미엄 강조 영역.

tsx

1<Card>...</Card>
2<Card variant="elevated">...</Card>
3<Card variant="ghost" className="bg-gradient-brand text-on-brand">...</Card>

Compound API

Header / Title / Description / Body / Actions

새 에이전트

AI 채팅 에이전트를 생성합니다.

NEW

모델, 프롬프트, 도구 정의를 단계별로 설정합니다.

tsx

1<Card>
2  <Card.Header>
3    <div>
4      <Card.Title>새 에이전트</Card.Title>
5      <Card.Description>AI 채팅 에이전트를 생성합니다.</Card.Description>
6    </div>
7    <Badge variant="brand">NEW</Badge>
8  </Card.Header>
9  <Card.Body>모델, 프롬프트, 도구 정의를 단계별로 설정합니다.</Card.Body>
10  <Card.Actions>

Surface tones

시맨틱 토큰 활용

Default

기본 표면.

Brand

CTA 영역.

Danger

삭제 액션 영역.

tsx

1<Card>...</Card>
2<Card className="bg-brand-subtle border-focus">...</Card>
3<Card className="border-danger">...</Card>

API

Name	Type	Default	Description
variant	"outlined" \| "elevated" \| "ghost"	"outlined"	—
padding	"none" \| "sm" \| "md" \| "lg"	"md"	—
radius	"md" \| "lg" \| "xl"	"lg"	—
Card.Header	div	—	flex justify-between.
Card.Title	h3	—	font-semibold.
Card.Description	p	—	opacity-80, 부모 색 상속.
Card.Body	div	—	opacity-85, 부모 색 상속.
Card.Actions	div	—	flex justify-end.
...props	HTMLAttributes<HTMLDivElement>	—	—