reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
WidgetGrid
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.

WidgetGrid

Shell

Arrange draggable and resizable dashboard widgets with react-grid-layout.

data
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { WidgetGrid } from "@reopt-ai/opt-ui";

Live preview

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

100%
Widget A
Widget B
Widget C

컴포넌트 의존 관계

깊이
▲ USED BY (1)custom-dashboardWidgetGrid
View test results

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • 위젯을 렌더링한다 (fallback grid)

Blocks that use this component

opt-ui

CustomDashboard

Blocks

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

Related components

opt-ui

DomainTable

Shells

Manage domain rows in a Composite grid with keyboard navigation.

opt-ui

DataTable

Shells

Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.

opt-ui

QueryResultsTable

Shells

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

opt-ui

TreeTable

Shells

Explore hierarchical rows with recursive rendering and expand and collapse controls.

opt-ui

InlineEditTable

Shells

Edit cells with a double click, confirm with Enter, and cancel with Escape.

opt-ui

KanbanBoard

Shells

Move cards between Kanban columns using HTML5 drag and drop.

PreviousEventMetaEditorNextReportBuilder