reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Card

Card

컴포넌트

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

layout
관련 문서
bun add @reopt-ai/opt-ui
100%

기본 사용

카드 제목

카드에 대한 설명입니다.

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

변형

Default
Outline
Ghost

패딩 크기

Small
Medium
Large

컴포넌트 의존 관계

깊이
▲ USED BY (1)marketplace-catalogCard

테스트 커버리지

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

관련 컴포넌트

PageHeader

페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.

레이아웃

ScrollArea

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

레이아웃

Container

최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.

레이아웃

Section

시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.

레이아웃

Resizable

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

레이아웃

Text

본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.

이전EmptyState다음Checkbox

기본 사용

프로젝트 설정

프로젝트의 기본 정보와 환경을 관리합니다.

대시보드

사용자 목록

등록된 사용자를 검색하고 관리합니다.

기본 사용

수직 스크롤

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

수평 스크롤

1
2
3
4
5
6
7
8
9
10

기본 사용

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

기본 사용

기본 정보

프로젝트의 기본 설정을 관리합니다.

폼 필드 영역

고급 설정

고급 설정 영역
추가 옵션 영역

제목 없는 섹션 (aria-labelledby 미설정)

기본 사용

수평 분할

패널 A
패널 B

수직 분할

상단
하단

텍스트 역할과 톤

본문은 body 역할의 semantic token을 사용합니다.

레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui