Revenue
$48,250
+12.5% from last month
Dashboard Grid
A drag-and-drop, resizable widget layout component for composing dashboards. Built on CSS Grid with responsive breakpoints, state persistence, and keyboard support.
Default
A static dashboard with KPI cards and content widgets. Set
Editable="false" to disable drag and resize.No widgets to display
Users
2,420
+8.1% from last month
Orders
1,210
+3.2% from last month
Sales Overview
Chart placeholder
Recent Activity
New signup2m ago
Order placed5m ago
Payment received12m ago
User upgraded1h ago
Edit Mode
Toggle
Editable to control whether widgets can be dragged and resized. Hover over widgets to reveal drag handles in the header and resize handles on corners and edges. Use OnRemove to show a remove button on hover.No widgets to display
Editable Widget
Drag handles visible on hover
Another Widget
Resize handles visible on hover
Custom Widget Content
Widgets support
Header, ChildContent, and Footer render fragments. Use BbDashboardWidgetHeader for custom headers with icons and badges.No widgets to display
Progress Metrics
CPU Usage72%
Memory58%
Disk34%
Custom Header
Live
Widget with custom header and badge
With Footer
This widget has a footer
Constrained & Static
Control resize limits with
MinColumnSpan, MaxColumnSpan, MinRowSpan, and MaxRowSpan. Set Static="true" to lock a widget in place, or Draggable="false" to allow resize only.No widgets to display
Constrained (6-12 cols, 4-8 rows)
Resize is clamped to min/max
Static (locked)
Cannot be dragged or resized
No Drag (resize only)
Resize allowed, drag disabled
Loading State
Set
Loading on the grid for a full skeleton, or on individual widgets for per-widget loading states.No widgets to display
Server Response Time
142ms
Average over last hour
External API
Empty State
When no widgets exist, the grid shows
EmptyContent or a default empty message. Use OnAddWidget to show an "Add Widget" button.No widgets yet
Get started by adding widgets to your dashboard.