Widget Card

Dashboard widget shell with grid-size presets, header slot, and overlay support.

Surfacesdashboardwidgetgrid

Dashboard widget shell with size presets and optional overlay content.

Preview

Loading preview…

Usage

Dashboard widget shell with grid-size presets, header slot, and overlay support.

<WidgetCard title="Scene" size="sm-b" overlay={<OverlayButton>+</OverlayButton>}>
  <div>Widget body</div>
</WidgetCard>

Files

components/steez/WidgetCard.tsxcomponent

components/steez/WidgetCard.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { WidgetCard } from "@steez-ui/ui/blocks";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/widget-card.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { WidgetCard } from "<project-root>/components/steez/WidgetCard";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/widget-card.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Stat Card

Small numeric stat block with optional tone and subvalue.

Themed Card

Base content container with optional title and featured emphasis.