Widget

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.

Anatomy

Import the Widget component and access all parts using dot notation.

import {Widget} from "@heroui-pro/react";

<Widget>
  <Widget.Header>
    <Widget.Title />
    <Widget.Description />
  </Widget.Header>
  <Widget.Content />
  <Widget.Footer />
  <Widget.Legend>
    <Widget.LegendItem />
  </Widget.Legend>
</Widget>

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 with surface-secondary background.
• .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 with bg-surface and 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.

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.

Widget.Title

Primary label text rendered as a <span>.

Widget.Description

Secondary descriptive text rendered as a <span>.

Widget.Content

The elevated inner area with bg-surface background and subtle shadow. This is where charts, tables, or KPIs go.

Widget.Footer

Optional bottom row for actions or metadata.

Widget.Legend

Inline legend container. Typically placed inside Widget.Header.

Widget.LegendItem

A single legend entry with a color dot and label.