카드

카드 (Card)

단일 주제와 관련된 콘텐츠를 표시할 때 사용하는 컴포넌트예요. 콘텐츠를 시각적으로 구분된 컨테이너에 담아 체계적으로 보여줘요.

출처: 문서

본문

사용법 (Usage)

import { Card } from "@chakra-ui/react"

<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>

예제 (Examples)

변형 (Variants)

variant prop을 사용해 카드의 시각적 스타일을 바꿀 수 있어요.

폼 안에서 (Within Form)

관련 필드들을 함께 묶기 위해 폼 안에서 Card 컴포넌트를 사용할 수 있어요.

크기 (Sizes)

size prop을 사용해 카드의 크기를 바꿀 수 있어요.

이미지와 함께 (With Image)

Card 컴포넌트를 사용해 이미지를 표시할 수 있어요.

가로 (Horizontal)

Card 컴포넌트를 사용해 콘텐츠를 가로로 표시할 수 있어요.

아바타와 함께 (With Avatar)

Card 컴포넌트를 사용해 아바타를 표시할 수 있어요.

커스터마이징 (Customization)

새 변형 추가하기 (Adding new variants)

새 스타일 변형을 추가하려면 커스텀 Card 레시피를 만들어 보세요:

import { defineSlotRecipe } from "@chakra-ui/react"
import { cardAnatomy } from "@chakra-ui/react/anatomy"

const customCardRecipe = defineSlotRecipe({
  className: "chakra-card",
  slots: cardAnatomy.keys(),
  variants: {
    // add new variant="ghost"
    variant: {
      gradient: {
        root: {
          bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          color: "white",
        },
      },
    },
  },
})

새 크기 추가하기 (Adding new sizes)

Card 레시피에 커스텀 크기 변형을 추가해 보세요:

const customCardRecipe = defineSlotRecipe({
  // ...
  variants: {
    size: {
      // ... existing sizes (sm, md, lg)
      xl: {
        root: { "--card-padding": "spacing.10" },
        title: { textStyle: "2xl" },
      },
    },
  },
})

기본값 바꾸기 (Changing defaults)

size와 variant에 새 기본값을 설정해 보세요:

const customCardRecipe = defineSlotRecipe({
  // ...
  defaultVariants: {
    variant: "elevated", // Default to elevated instead of outline
    size: "lg", // Default to lg instead of md
  },
})

테마 업데이트하기 (Updating the theme)

커스텀 레시피를 테마에 추가하세요:

const config = defineConfig({
  theme: {
    slotRecipes: {
      card: customCardRecipe,
    },
  },
})

const system = createSystem(defaultConfig, config)

export function Provider(props: { children: React.ReactNode }) {
  return <ChakraProvider value={system}>{/* ... */}</ChakraProvider>
}

참고로 기본 Card 레시피를 확인해 보세요.

Props

Root

탐색기 (Explorer)

Card 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)