SettingsPanel

Block

Arrange settings navigation beside a caller-provided content slot.

npx @reopt-ai/opt-cli block add settings-panel

Install and import

bash

npx @reopt-ai/opt-cli block add settings-panel

tsx

import { SettingsPanel } from "@/components/surfaces/settings-panel";

Live preview

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

100%

기본 사용

일반 설정

프로젝트의 기본 정보를 관리합니다.

프로젝트 정보

프로젝트 이름

설명

슬러그

위험 구역

프로젝트 삭제

이 작업은 되돌릴 수 없습니다.

SettingsPanel

Prop	Type	Default	Description
sectionsRequired	SettingsSectionDef[]	—	섹션 정의 배열. { id, label, icon?, badge? }
activeSection	string	—	제어 모드: 현재 활성 섹션 ID
defaultActiveSection	string	—	비제어 모드: 초기 활성 섹션 ID
onSectionChange	(sectionId: string) => void	—	섹션 변경 핸들러
childrenRequired	ReactNode	—	섹션 콘텐츠. activeSection에 따라 조건부 렌더링
sidebarTitle	string	"설정"	사이드바 제목
sidebarWidth	"sm" \| "md" \| "lg"	"md"	사이드바 너비
className	string	—	최외곽 컨테이너 CSS 클래스

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

SettingsPanel 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

PropertyCatalog

Blocks

Browse discovered properties by scope and type, with inferred types explicitly labeled.

ProjectSettings

Blocks

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

CustomDashboard

Blocks

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

DebugWorkspace

Blocks

Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.

VisualDiffManager

Blocks

Review screenshot regressions and approvals with a three-column snapshot list and image-diff viewer.

UserDetail

Blocks

Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.

SettingsPanel

Block

Arrange settings navigation beside a caller-provided content slot.

Related docs

npx @reopt-ai/opt-cli block add settings-panel

Install and import

bash

npx @reopt-ai/opt-cli block add settings-panel

tsx

import { SettingsPanel } from "@/components/surfaces/settings-panel";

Live preview

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

100%

기본 사용

일반 설정

프로젝트의 기본 정보를 관리합니다.

프로젝트 정보

프로젝트 이름

설명

슬러그

위험 구역

프로젝트 삭제

이 작업은 되돌릴 수 없습니다.

SettingsPanel

Prop	Type	Default	Description
sectionsRequired	SettingsSectionDef[]	—	섹션 정의 배열. { id, label, icon?, badge? }
activeSection	string	—	제어 모드: 현재 활성 섹션 ID
defaultActiveSection	string	—	비제어 모드: 초기 활성 섹션 ID
onSectionChange	(sectionId: string) => void	—	섹션 변경 핸들러
childrenRequired	ReactNode	—	섹션 콘텐츠. activeSection에 따라 조건부 렌더링
sidebarTitle	string	"설정"	사이드바 제목
sidebarWidth	"sm" \| "md" \| "lg"	"md"	사이드바 너비
className	string	—	최외곽 컨테이너 CSS 클래스

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

SettingsPanel 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

PropertyCatalog

Blocks

Browse discovered properties by scope and type, with inferred types explicitly labeled.

ProjectSettings

Blocks

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

CustomDashboard

Blocks

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

DebugWorkspace

Blocks

Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.

VisualDiffManager

Blocks

Review screenshot regressions and approvals with a three-column snapshot list and image-diff viewer.

UserDetail

Blocks

Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.