Widget

Usage

"use client";

import { Widget } from "@thenamespace/uikit";
import { LineChart } from "@thenamespace/uikit/line-chart";

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 "@thenamespace/uikit";

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

With Bar Chart

"use client";

import { Widget } from "@thenamespace/uikit";
import { BarChart } from "@thenamespace/uikit/bar-chart";

With Line Chart

"use client";

import { Widget } from "@thenamespace/uikit";
import { LineChart } from "@thenamespace/uikit/line-chart";

With Pie Chart

"use client";

import { Widget } from "@thenamespace/uikit";
import { PieChart } from "@thenamespace/uikit/pie-chart";

With KPIs

"use client";

import { Widget } from "@thenamespace/uikit";
import { KPI } from "@thenamespace/uikit/kpi";
import { KPIGroup } from "@thenamespace/uikit/kpi-group";

Combine Widget with KPIGroup for a metrics overview with inline sparklines.

Usage Summary

"use client";

import { Widget } from "@thenamespace/uikit";
import { ProgressCircle } from "@thenamespace/uikit/progress-circle";
import { Table } from "@thenamespace/uikit/table";

A table with ProgressCircle indicators inside Widget — no charts involved, just structured data.

With Table

"use client";

import { Widget } from "@thenamespace/uikit";
import { Table } from "@thenamespace/uikit/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

"use client";

import { Widget } from "@thenamespace/uikit";
import { AreaChart } from "@thenamespace/uikit/area-chart";
import { BarChart } from "@thenamespace/uikit/bar-chart";

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.