Intentwise Primitives

Building Blocks

Shared utility components used internally by charts and cards. These can also be used standalone for custom layouts.

ChartContainer

Card wrapper with optional title, description, and PNG export button. Used by all chart components.

Sample Chart Container

This wrapper provides consistent card styling, title placement, and optional PNG export.

Chart content goes here

Show code

<ChartContainer title="My Chart" description="..." exportable>
  {children}
</ChartContainer>

ChartLegend

Horizontal legend with colored indicators. Supports dashed line style for differentiation.

Revenue

Ad Spend

Target

Show code

<ChartLegend items={[{ label: 'Revenue', color: '#3b82f6' }, { label: 'Target', color: '#10b981', dashed: true }]} />

EmptyState

Placeholder for empty data, loading, or error conditions.

Empty

No data available

There is no data to display for the current selection.

Loading data

Please wait while we fetch the latest data...

Error

Something went wrong

We encountered an error loading the data. Please try again.

Show code

<EmptyState type="empty" />
<EmptyState type="loading" />
<EmptyState type="error" />

CommandPalette

Keyboard-Driven Search

Cmd+K command palette built on cmdk. Supports grouped items, keyboard shortcuts, search filtering, and custom rendering.

Show code

<CommandPalette data={data} open={open} onOpenChange={setOpen} onSelect={(id) => console.log(id)} />

QuickLinks

Expandable quick links

Collapsible list of links. items, activeId, onSelect, defaultExpanded.

Show code

<QuickLinks
  items={[{ id: 'overview', label: 'Overview' }, ...]}
  activeId="overview"
  onSelect={(id) => setActive(id)}
  defaultExpanded={true}
/>

UnderlineTabs

Underline tab bar

Horizontal tabs with underline indicator. items (id, label, isBeta?), activeId, onChange.

Show code

<UnderlineTabs
  items={[{ id: 'summary', label: 'Summary' }, { id: 'details', label: 'Details', isBeta: true }]}
  activeId={activeId}
  onChange={setActiveId}
/>

ChartTooltip

Chart tooltip content

Standardized tooltip used by Recharts custom tooltips. active, label, entries (name, value, color, format).

Show code

<ChartTooltip active label="Jan 15" entries={[{ name: 'Revenue', value: 12000, color: '#3b82f6', format: 'currency' }]} />

ChartErrorBoundary

Error boundary for charts

Catches rendering errors and shows EmptyState type='error' or custom fallback.

Wraps chart (or any) content. On error, renders EmptyState or custom fallback.

Show code

<ChartErrorBoundary fallback={<EmptyState type="error" />}>
  <MyChart />
</ChartErrorBoundary>

IWDialog

Size Variants

Portal-based modal dialog with sm, md, lg, xl, and full size options. Supports escape-key and backdrop close.

Show code

<IWDialog isOpen={open} onClose={() => setOpen(false)} size="md">
  <IWDialogHeader title="Dialog Title" />
  <IWDialogBody>Content here</IWDialogBody>
  <IWDialogFooter><button>Confirm</button></IWDialogFooter>
</IWDialog>

ConfirmDialog

Confirm Dialog

Simple confirmation modal with title, message, and confirm/cancel actions.

Show code

<ConfirmDialog isOpen={open} onClose={() => setOpen(false)} title="Delete Campaign?"
  message="This action cannot be undone." onConfirm={handleDelete} />

FullScreenProgressOverlay

Full Screen Progress

Fixed overlay with animated progress bar. Auto-dismisses after 3 seconds in this demo.

Show code

<FullScreenProgressOverlay visible={visible} message="Processing..." />

LoadingOverlay

Loading Overlay

Overlays children with a frosted-glass effect and animated loading bar when active.

Campaign Performance

Loading overlay wraps this content area.

Impressions

Clicks

Spend

Show code

<LoadingOverlay loading={loading}>{children}</LoadingOverlay>