<WidgetHeader
  title="Revenue"
  subtitle="Last 30 days"
  actions={<ToggleGroup />}
/>

<WidgetContent isLoading={loading} isEmpty={!data.length} showDots>
  <Chart />
</WidgetContent>

<Widget>
  <WidgetHeader
    title="Sales Overview"
    subtitle="Monthly performance"
    actions={<ToggleGroup />}
  />
  <WidgetContent isLoading={loading} isEmpty={!data.length}>
    <BarChart data={data} />
  </WidgetContent>
</Widget>

// With custom loading state and dotted background
<Widget>
  <WidgetHeader title="Revenue" />
  <WidgetContent
    isLoading={loading}
    loadingContent={<BarChartSkeleton height={200} />}
    showDots
  >
    <AreaChart data={data} />
  </WidgetContent>
</Widget>