DesignGuidePanel

Shell

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

display

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { DesignGuidePanel } from "@reopt-ai/opt-ui";

Live preview

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

100%

Usage

디자인 시스템의 아키텍처를 한눈에 정리한 참조 패널입니다. UI 디버거와 별도로 @reopt-ai/opt-ui에서 export되며, 필요한 페이지에 직접 렌더링하여 사용합니다.

import { DesignGuidePanel } from "@reopt-ai/opt-ui";

// 아무 페이지에서 렌더링
<DesignGuidePanel />

패널 섹션

패널에 포함된 6개 섹션:

1. Primitive 컴포넌트 맵

예제별 사용 primitive와 WAI-ARIA 역할 표

2. 키보드 네비게이션 패턴

글로벌 단축키, Composite/Roving Tabindex, 예제별 키보드 조작

3. Tailwind data-attribute 셀렉터

data-[active-item], data-[focus-visible], data-[enter]/[leave], data-[open] 등 사용법

4. 접근성 속성

WAI-ARIA 역할, aria-label, aria-invalid, aria-expanded, aria-live

5. 포커스 관리 전략

RouteFocusManager, Sidebar activeId 동기화, focusLoop/focusWrap, Dialog 포커스 트랩

6. 프로젝트 구조

폴더 트리, 핵심 의존성 목록

활용 예시

DesignGuidePanel은 다음과 같은 상황에서 유용합니다:

온보딩 페이지 — 새 팀원이 디자인 시스템을 빠르게 파악할 수 있도록 배치
스타일가이드 — 문서 페이지에 참조용으로 포함
개발 대시보드 — 컴포넌트 개발 시 빠른 참조용

DesignGuidePanel

Prop	Type	Default	Description
className	string	—	추가 CSS 클래스

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

디자인 가이드 요약과 className을 렌더링한다

Related components

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

EventIcon

Shells

Display an event icon from a semantic key or React node with a background color.

DesignGuidePanel

Shell

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

display

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { DesignGuidePanel } from "@reopt-ai/opt-ui";

Live preview

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

100%

Usage

import { DesignGuidePanel } from "@reopt-ai/opt-ui";

// 아무 페이지에서 렌더링
<DesignGuidePanel />

패널 섹션

패널에 포함된 6개 섹션:

1. Primitive 컴포넌트 맵

예제별 사용 primitive와 WAI-ARIA 역할 표

2. 키보드 네비게이션 패턴

글로벌 단축키, Composite/Roving Tabindex, 예제별 키보드 조작

3. Tailwind data-attribute 셀렉터

data-[active-item], data-[focus-visible], data-[enter]/[leave], data-[open] 등 사용법

4. 접근성 속성

WAI-ARIA 역할, aria-label, aria-invalid, aria-expanded, aria-live

5. 포커스 관리 전략

RouteFocusManager, Sidebar activeId 동기화, focusLoop/focusWrap, Dialog 포커스 트랩

6. 프로젝트 구조

폴더 트리, 핵심 의존성 목록

활용 예시

DesignGuidePanel은 다음과 같은 상황에서 유용합니다:

온보딩 페이지 — 새 팀원이 디자인 시스템을 빠르게 파악할 수 있도록 배치
스타일가이드 — 문서 페이지에 참조용으로 포함
개발 대시보드 — 컴포넌트 개발 시 빠른 참조용

DesignGuidePanel

Prop	Type	Default	Description
className	string	—	추가 CSS 클래스

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

디자인 가이드 요약과 className을 렌더링한다

Related components

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

EventIcon

Shells

Display an event icon from a semantic key or React node with a background color.