Widget

Usage

import {
  Widget,
  WidgetHeader,
  WidgetTitle,
  WidgetContent,
  WidgetFooter,
  WidgetValue,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple widget with a title and content area.

View source

import {
  Widget,
  WidgetHeader,
  WidgetTitle,
  WidgetContent,
  WidgetFooter,
} from '@acronis-platform/shadcn-uikit/react';

export function WidgetBasic() {
  return (
    <Widget className="w-[350px]">
      <WidgetHeader>
        <WidgetTitle>Widget Title</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <p className="text-sm text-muted-foreground">
          A basic widget with header, content, and footer sections.
        </p>
      </WidgetContent>
      <WidgetFooter>
        <p className="text-xs text-muted-foreground">Last updated: just now</p>
      </WidgetFooter>
    </Widget>
  );
}

Sizes

Widgets in small, medium, large, and extra-large sizes.

View source

import {
  Widget,
  WidgetHeader,
  WidgetTitle,
  WidgetContent,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';

export function WidgetSizes() {
  return (
    <div className="flex items-start gap-4 flex-wrap">
      {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <Widget key={size} size={size} className="w-[200px]">
          <WidgetHeader>
            <WidgetTitle>Size: {size}</WidgetTitle>
          </WidgetHeader>
          <WidgetContent>
            <WidgetValue>123</WidgetValue>
            <WidgetLabel>Items</WidgetLabel>
          </WidgetContent>
        </Widget>
      ))}
    </div>
  );
}

Interactive

A clickable widget with hover and focus states.

View source

import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetContent,
  WidgetFooter,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';
import { TrendingUpIcon } from '../icons/missing-icons';
export function WidgetInteractive() {
  return (
    <div className="flex gap-4 flex-wrap">
      <Widget interactive className="w-[280px]">
        <WidgetHeader>
          <WidgetIcon>
            <TrendingUpIcon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>Clickable Widget</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>+12.5%</WidgetValue>
          <WidgetLabel>Growth this quarter</WidgetLabel>
        </WidgetContent>
        <WidgetFooter>
          <p className="text-xs text-muted-foreground">
            Hover, click, or focus to see interactive states
          </p>
        </WidgetFooter>
      </Widget>

      <Widget className="w-[280px]">
        <WidgetHeader>
          <WidgetTitle>Non-interactive</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>Static</WidgetValue>
          <WidgetLabel>This widget has no hover/focus states</WidgetLabel>
        </WidgetContent>
      </Widget>
    </div>
  );
}

With Icon

Widget with a leading icon in the header.

View source

import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetActions,
  WidgetContent,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { ShieldIcon } from '@acronis-platform/shadcn-uikit';
import { MoreVerticalIcon } from '../icons/missing-icons';
export function WidgetWithIcon() {
  return (
    <Widget className="w-[350px]">
      <WidgetHeader>
        <WidgetIcon>
          <ShieldIcon className="h-4 w-4" />
        </WidgetIcon>
        <WidgetTitle>Protection Status</WidgetTitle>
        <WidgetActions>
          <Button variant="ghost" size="icon" className="h-6 w-6">
            <MoreVerticalIcon className="h-4 w-4" />
          </Button>
        </WidgetActions>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>All Clear</WidgetValue>
        <WidgetLabel>No issues detected</WidgetLabel>
      </WidgetContent>
    </Widget>
  );
}

Value Display

Widget showcasing a prominent metric value.

View source

import {
  Widget,
  WidgetHeader,
  WidgetTitle,
  WidgetContent,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';

export function WidgetValueDisplay() {
  return (
    <div className="flex gap-4 flex-wrap">
      <Widget className="w-[220px]">
        <WidgetHeader>
          <WidgetTitle>Revenue</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>$45,231</WidgetValue>
          <WidgetLabel>+20.1% from last month</WidgetLabel>
        </WidgetContent>
      </Widget>

      <Widget className="w-[220px]">
        <WidgetHeader>
          <WidgetTitle>Users</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>2,350</WidgetValue>
          <WidgetLabel>+180 this week</WidgetLabel>
        </WidgetContent>
      </Widget>

      <Widget className="w-[220px]">
        <WidgetHeader>
          <WidgetTitle>Uptime</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>99.9%</WidgetValue>
          <WidgetLabel>Last 30 days</WidgetLabel>
        </WidgetContent>
      </Widget>
    </div>
  );
}

With Divider

Widget with a horizontal divider separating sections.

View source

import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetContent,
  WidgetDivider,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';
import { ActivityIcon } from '../icons/missing-icons';
export function WidgetWithDivider() {
  return (
    <Widget className="w-[350px]">
      <WidgetHeader>
        <WidgetIcon>
          <ActivityIcon className="h-4 w-4" />
        </WidgetIcon>
        <WidgetTitle>System Health</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <div className="flex items-center justify-between">
          <WidgetLabel>CPU Usage</WidgetLabel>
          <WidgetValue>32%</WidgetValue>
        </div>
      </WidgetContent>
      <WidgetDivider />
      <WidgetContent>
        <div className="flex items-center justify-between">
          <WidgetLabel>Memory</WidgetLabel>
          <WidgetValue>64%</WidgetValue>
        </div>
      </WidgetContent>
      <WidgetDivider />
      <WidgetContent>
        <div className="flex items-center justify-between">
          <WidgetLabel>Disk I/O</WidgetLabel>
          <WidgetValue>18%</WidgetValue>
        </div>
      </WidgetContent>
    </Widget>
  );
}

Minimal

A minimal widget with just essential content.

View source

import { Widget, WidgetContent } from '@acronis-platform/shadcn-uikit/react';

export function WidgetMinimal() {
  return (
    <div className="flex gap-4 flex-wrap">
      <Widget className="w-[300px]">
        <WidgetContent>
          <p className="text-sm text-muted-foreground">
            A minimal widget with content only — no header or footer.
          </p>
        </WidgetContent>
      </Widget>

      <Widget size="sm" className="w-[300px]">
        <WidgetContent className="flex items-center justify-center">
          <p className="text-sm font-medium">Small content-only widget</p>
        </WidgetContent>
      </Widget>
    </div>
  );
}

Dashboard Grid

Multiple widgets arranged in a dashboard grid layout.

View source

import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetActions,
  WidgetContent,
  WidgetFooter,
  WidgetValue,
  WidgetLabel,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { ShieldIcon, WarningCircleIcon } from '@acronis-platform/shadcn-uikit';
import {
  ActivityIcon,
  BarChart3Icon,
  MoreVerticalIcon,
  TrendingUpIcon,
} from '../icons/missing-icons';
export function WidgetDashboardGrid() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Widget interactive>
        <WidgetHeader>
          <WidgetIcon>
            <ShieldIcon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>Protected</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>1,284</WidgetValue>
          <WidgetLabel>Workloads</WidgetLabel>
        </WidgetContent>
      </Widget>

      <Widget interactive>
        <WidgetHeader>
          <WidgetIcon>
            <WarningCircleIcon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>Alerts</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>7</WidgetValue>
          <WidgetLabel>Active alerts</WidgetLabel>
        </WidgetContent>
      </Widget>

      <Widget interactive>
        <WidgetHeader>
          <WidgetIcon>
            <TrendingUpIcon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>Storage</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <WidgetValue>3.2 TB</WidgetValue>
          <WidgetLabel>Used of 5 TB</WidgetLabel>
        </WidgetContent>
      </Widget>

      <Widget size="lg" className="col-span-2">
        <WidgetHeader>
          <WidgetIcon>
            <BarChart3Icon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>Backup Success Rate</WidgetTitle>
          <WidgetActions>
            <Button variant="ghost" size="icon" className="h-6 w-6">
              <MoreVerticalIcon className="h-4 w-4" />
            </Button>
          </WidgetActions>
        </WidgetHeader>
        <WidgetContent>
          <p className="text-sm text-muted-foreground">
            Chart placeholder — visualization content area
          </p>
        </WidgetContent>
        <WidgetFooter>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </WidgetFooter>
      </Widget>

      <Widget size="lg">
        <WidgetHeader>
          <WidgetIcon>
            <ActivityIcon className="h-4 w-4" />
          </WidgetIcon>
          <WidgetTitle>ActivityIcon</WidgetTitle>
        </WidgetHeader>
        <WidgetContent>
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between">
              <WidgetLabel>Backups</WidgetLabel>
              <span className="text-sm font-medium tabular-nums">248</span>
            </div>
            <div className="flex items-center justify-between">
              <WidgetLabel>Restores</WidgetLabel>
              <span className="text-sm font-medium tabular-nums">12</span>
            </div>
            <div className="flex items-center justify-between">
              <WidgetLabel>Failures</WidgetLabel>
              <span className="text-sm font-medium tabular-nums">3</span>
            </div>
          </div>
        </WidgetContent>
      </Widget>
    </div>
  );
}

API Reference

Prop

Type

Edit on GitHub

Widget

On this page