Skip to content
+

Widget

Composite card surface for metric, chart, and dashboard content with headline slots, actions, loading, and empty states.

Introduction

Widget is part of the Open UI Kit Core public API. Use surfaces to group related content and make page hierarchy clear.

Use this page as the implementation entry point, then use Storybook to inspect visual states, prop combinations, and edge cases that are easier to understand interactively.

Import

import { Widget } from '@open-ui-kit/core';

When to use

Use this component when content needs a clear container, disclosure model, or application chrome.

Anatomy

Surface components combine a container, title or header treatment, body content, and optional action areas.

Keep each part purposeful: the visible label or title should explain the object, the state should reflect real product data, and supporting content should help users decide what to do next.

Basic example

import { Widget } from '@open-ui-kit/core';

export function WidgetExample() {
  return (
    <Widget>
      Widget
    </Widget>
  );
}

Storybook scenarios

Storybook is the source of truth for interactive examples, controls, and visual state checks. Start with the closest story, then adapt the props to match your product flow.

  • Default
  • Loading
  • Empty State
  • Without Label
  • With Tooltip
  • Label As Element
  • Header Slots

Behavior notes

  • Use borders, elevation, and spacing to clarify hierarchy.
  • Avoid stacking multiple framed surfaces inside each other.
  • Check how the surface behaves with long titles, actions, and responsive width.

Props

Widget is exported from @open-ui-kit/core. Use the exported TypeScript props for implementation details and keep local overrides narrow.

Prop Type Description
Widget props Component-specific props Controls the supported behavior, slots, state, and styling for Widget.
children React.ReactNode Content rendered inside the component when the component supports composition.
className string Adds a class to the root slot for product-level styling hooks.
sx SxProps Applies local style overrides while still using the active Open UI Kit theme.

Accessibility

  • Use headings that describe the surface clearly.
  • Keep nested interactive controls reachable and visually focused.
  • Avoid making large surfaces clickable when they contain multiple actions.

Usage guidance

  • Keep each surface focused on one object, task, or content group.
  • Use spacing before adding heavier borders or elevation.
  • Reserve stronger surfaces for content that needs separation from the page.
  • Do not use surfaces only as decoration.

Resources