DashboardGrid

Shell

Arrange stat cards in one to four columns with two-dimensional arrow-key navigation.

analytics

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

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

Live preview

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

100%

기본 사용 (3열)

총 매출₩12,450,000↑ +12.5%

주문 수1,234↑ +8.2%

이탈률32.1%↓ -4.3%

전환율2.4%→ 0.0%

활성 사용자5,678↑ +15.3%

평균 세션4m 32s↓ -2.1%

2열 레이아웃

총 매출₩12,450,000↑ +12.5%

주문 수1,234↑ +8.2%

이탈률32.1%↓ -4.3%

전환율2.4%→ 0.0%

DashboardGrid

Prop	Type	Default	Description
statsRequired	StatCard[]	—	통계 데이터 배열. { id, title, value, change, trend }
columns	number	3	행당 컬럼 수

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일4/4 통과

4성공

0실패

4전체

모든 통계 카드를 렌더링한다
grid role을 갖는다
유효하지 않은 columns 값을 1컬럼으로 정규화한다
columns 값을 안전한 정수 범위로 제한한다

키보드 동작

키	동작
↑ ↓ ← →	카드 간 2D 탐색
Tab	다음 섹션으로 이동

Blocks that use this component

ProjectDashboard

Blocks

Build a project overview with DashboardGrid, DeploymentTimeline, and EnvPanel.

TaskDashboard

Blocks

Manage tasks with activity, team members, quick actions, and filters.

Related components

ReportBuilder

Shells

Build reports in four labeled steps: chart type, data, styling, and preview.

InsightsPanel

Shells

Review anomaly insights with severity cards, statistics filters, dismissal, and detection settings for type, Z-score, and days.

TimeRangeSelector

Shells

Choose time ranges using a Popover, DateRangePicker, and preset buttons.

ExportButton

Shells

Export data as CSV or JSON, or delegate PDF export to a callback through a dropdown menu.

SummaryRow

Shells

Standardize a row of StatCard metrics with skeleton cards during loading.

ScoreBreakdown

Shells

Explain a composite score through each dimension's value, weight, and meaning alongside the total.

DashboardGrid

Shell

Arrange stat cards in one to four columns with two-dimensional arrow-key navigation.

analytics

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

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

Live preview

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

100%

기본 사용 (3열)

총 매출₩12,450,000↑ +12.5%

주문 수1,234↑ +8.2%

이탈률32.1%↓ -4.3%

전환율2.4%→ 0.0%

활성 사용자5,678↑ +15.3%

평균 세션4m 32s↓ -2.1%

2열 레이아웃

총 매출₩12,450,000↑ +12.5%

주문 수1,234↑ +8.2%

이탈률32.1%↓ -4.3%

전환율2.4%→ 0.0%

DashboardGrid

Prop	Type	Default	Description
statsRequired	StatCard[]	—	통계 데이터 배열. { id, title, value, change, trend }
columns	number	3	행당 컬럼 수

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일4/4 통과

4성공

0실패

4전체

모든 통계 카드를 렌더링한다
grid role을 갖는다
유효하지 않은 columns 값을 1컬럼으로 정규화한다
columns 값을 안전한 정수 범위로 제한한다

키보드 동작

키	동작
↑ ↓ ← →	카드 간 2D 탐색
Tab	다음 섹션으로 이동

Blocks that use this component

ProjectDashboard

Blocks

Build a project overview with DashboardGrid, DeploymentTimeline, and EnvPanel.

TaskDashboard

Blocks

Manage tasks with activity, team members, quick actions, and filters.

Related components

ReportBuilder

Shells

Build reports in four labeled steps: chart type, data, styling, and preview.

InsightsPanel

Shells

Review anomaly insights with severity cards, statistics filters, dismissal, and detection settings for type, Z-score, and days.

TimeRangeSelector

Shells

Choose time ranges using a Popover, DateRangePicker, and preset buttons.

ExportButton

Shells

Export data as CSV or JSON, or delegate PDF export to a callback through a dropdown menu.

SummaryRow

Shells

Standardize a row of StatCard metrics with skeleton cards during loading.

ScoreBreakdown

Shells

Explain a composite score through each dimension's value, weight, and meaning alongside the total.