Widgets

beta

The Widgets component provides a flexible container for displaying content in widget-style layouts. It supports single-column and two-column configurations, with optional titles and “View more” links for each widget item.

Usage

import { Widgets } from '@harnessio/ui'

// ...

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

Two-Column Layout

The Widgets component supports a two-column layout when isTwoColumn is set to true and there are more than one child items.

With “View More” Link

Each widget item can include a “View more” link that navigates to additional content.

The isWidgetTable prop removes the default border and padding, useful when the widget contains a table or similar content that provides its own styling.

Without Title

Widget items can be rendered without a title for simpler layouts.

API Reference

`Root`

The root container component for widgets.

<Widgets.Root
  isTwoColumn={false}  // [OPTIONAL] Enable two-column layout
>
  {/* Widget items */}
</Widgets.Root>

Prop	Required	Default	Type
children	true		ReactNode
isTwoColumn	false	false	boolean

`Item`

Individual widget item component.

<Widgets.Item
  title="Widget Title"           // [OPTIONAL] Title displayed at the top of the widget
  moreLink={{ to: "/path" }}     // [OPTIONAL] Link props for "View more" link
  isWidgetTable={false}          // [OPTIONAL] Removes default border and padding
  className="custom-class"       // [OPTIONAL] Custom class name
>
  {/* Widget content */}
</Widgets.Item>

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