Widgets

Overview

The Widgets component is a flexible container for content laid out as widgets. It’s a compound of Widgets.Root (the container) and Widgets.Item (each widget), with support for single- or two-column layouts, optional titles, and a “View more” link per widget.

Variations

Two-column layout

Set isTwoColumn on the root to flow widgets across two columns. It applies only when there is more than one item.

With “View more” link

Each widget item can include a “View more” link. The link renders only when the item also has a title.

Widget table mode

isWidgetTable removes the default border and padding — useful when the widget holds a table or other content that brings its own styling.

Without title

Widget items can render without a title for simpler layouts.

Installation

import { Widgets } from "@harnessio/ui/components";

<Widgets.Root>
  <Widgets.Item title="Widget Title">{/* Widget content */}</Widgets.Item>
</Widgets.Root>;

Usage

Anatomy

Widgets is composed of a root container and one or more item widgets.

• Widgets.Root wraps the set of widgets and owns the column layout. With isTwoColumn, widgets flow across two columns (using CSS multi-column), but only when there’s more than one item — with a single child it stays single-column.
• Widgets.Item is an individual widget. It renders an optional title heading, its children as the body, and — when a title is present — an optional “View more” link built from moreLink.
• isWidgetTable strips the item’s border, padding, and rounded corners so table-like content can sit flush.

Note

The “View more” link only renders when the item has a title — the whole header row (title + link) is omitted otherwise. Give an item a title if it needs a moreLink.

Best practices

Do

• Give each widget a clear title so the dashboard is scannable, and use moreLink to point to the full view when a widget shows a summary.
• Use isTwoColumn for dashboards with several short widgets; keep it off when a single widget should span the full width.
• Turn on isWidgetTable when the content is a table or already draws its own frame, so borders don’t double up.

Don’t

• Don’t set isTwoColumn expecting a single widget to split — it’s a no-op with one item.
• Don’t pass moreLink without a title; the link won’t appear.

Accessibility

Labeling & semantics

• An item’s title renders as a heading, giving each widget a semantic label. There is no configurable heading level, so check the resulting heading order fits the surrounding page.
• The “View more” link takes its accessible name from the literal “View more” text. When several widgets share the page, that name repeats — pair it with a well-labelled title so the destination is clear in context.

Properties

Properties

Root

Prop	Required	Default	Type
children	true		ReactNode
isTwoColumn	false	false	boolean

Item

Prop	Required	Default	Type
children	true		ReactNode
title	false		string
moreLink	false		LinkProps
isWidgetTable	false	false	boolean
className	false		string