Widget
A dashboard container that wraps charts, tables, KPIs, or any content with a consistent surface treatment — secondary background shell with an elevated white content area.
Usage
The Widget component provides a cohesive dashboard container with a surface-secondary outer shell and an elevated bg-surface content area. While it's especially useful for charts, it works with any content — tables, KPIs, metrics, or custom layouts.
With Bar Chart
With Line Chart
With Pie Chart
With KPIs
Combine Widget with KPIGroup for a metrics overview with inline sparklines.
Usage Summary
A table with ProgressCircle indicators inside Widget — no charts involved, just structured data.
With Table
Widget works with non-chart content too. Use variant="secondary" on the Table to remove the default table background and let Widget.Content provide the surface.
Dashboard Grid
Multiple Widgets compose naturally into responsive dashboard layouts with consistent visual rhythm.
CSS Classes
Element Classes
.widget— Root container withsurface-secondarybackground..widget__header— Header row with title and legend, spaced between..widget__title— Primary label text..widget__description— Secondary descriptive text..widget__content— Elevated inner area withbg-surfaceand subtle shadow..widget__footer— Optional bottom row..widget__legend— Inline legend container..widget__legend-item— Single legend entry (dot + label)..widget__legend-item-dot— Color indicator dot..widget__legend-item-label— Legend text.
API Reference
Widget
The root container. Renders the outer shell with a surface-secondary background.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | Widget content (Header, Content, Footer, etc.). |
render | (props) => ReactElement | — | Custom render function for polymorphic element support. |
Also supports all native div HTML attributes.
Widget.Header
Header row with justify-between layout. Place the title on the left and legend or actions on the right.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | Header content (Title, Legend, Description, etc.). |
Widget.Title
Primary label text rendered as a <span>.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | Title text. |
Widget.Description
Secondary descriptive text rendered as a <span>.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | Description text. |
Widget.Content
The elevated inner area with bg-surface background and subtle shadow. This is where charts, tables, or KPIs go.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. Use p-0 to remove padding for edge-to-edge content like tables. |
children | ReactNode | — | Main content. |
Widget.Footer
Optional bottom row for actions or metadata.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | Footer content. |
Widget.Legend
Inline legend container. Typically placed inside Widget.Header.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
children | ReactNode | — | LegendItem children. |
Widget.LegendItem
A single legend entry with a color dot and label.
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | Required. CSS color for the dot (e.g., "var(--chart-3)"). |
className | string | — | Additional CSS classes. |
children | ReactNode | — | Label text. |