reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Card
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Card

Component

Group content in a card with Header, Title, Description, Content, and Footer components.

layout
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

카드 제목

카드에 대한 설명입니다.

카드 본문 콘텐츠가 여기에 들어갑니다.

변형

Default
Outline
Ghost

패딩 크기

Small
Medium
Large

Usage examples

Card layout

Card

PropTypeDefaultDescription
variant"default" | "outline" | "ghost""default"카드 스타일 변형
padding"none" | "sm" | "md" | "lg""md"내부 패딩 크기
selectablebooleanfalse선택 가능 모드 활성화
selectedboolean—선택 상태 (selectable=true 시)
onSelectedChange(selected: boolean) => void—선택 상태 변경 콜백

CardHeader

PropTypeDefaultDescription

CardTitle

PropTypeDefaultDescription

CardDescription

PropTypeDefaultDescription

CardContent

PropTypeDefaultDescription

CardFooter

PropTypeDefaultDescription

컴포넌트 의존 관계

깊이
▲ USED BY (1)marketplace-catalogCard
View test results

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • children을 렌더링한다
  • variant에 따른 스타일을 적용한다
  • padding에 따른 스타일을 적용한다
  • selectable 카드를 클릭하면 onSelectedChange가 호출된다
  • selectable 카드는 Enter 키로 토글된다
  • selectable=false일 때 기존 동작 유지

Blocks that use this component

opt-ui

MarketplaceCatalog

Blocks

Browse a marketplace card grid with search, tab filters, and sorting.

Related components

opt-ui

PageHeader

Core

Arrange a page title, status, tabs, actions, and query controls to fit the available width.

opt-ui

ScrollArea

Core

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

opt-ui

Container

Core

Center page content within a configurable maximum width.

opt-ui

Section

Core

Apply semantic section spacing and automatically associate a heading through aria-labelledby.

opt-ui

Resizable

Core

Create draggable split-panel layouts with react-resizable-panels.

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

PreviousIdentityNextCheckbox