Intentwise Primitives

Compositions

Full dashboard layout demonstrating every primitive type working together. Toggle dark mode to preview theming across all components.

LightDark

Navigation — TopBar

Pill with Beta tag

Show code
import { TopBar, type TopBarConfig } from '@intentwise/primitives/compositions';

const config: TopBarConfig = {
  items: [
    { id: 'org-select', name: 'Organization', type: 'singleSelect', placement: 'left', options, selected, onChange },
    { id: 'account-select', name: 'Account', type: 'singleSelect', placement: 'left', options, selected, onChange },
    // Pill version switch with a "Beta" tag
    { id: 'version-switch', name: 'Version switch', type: 'versionSwitch', placement: 'right', data: { label: 'Switch to New UI', tag: 'Beta' }, onSwitch },
    { id: 'theme-toggle', name: 'Theme toggle', type: 'themeToggle', placement: 'right', theme, onClick },
    { id: 'date-range', name: 'Date range', type: 'calendar', placement: 'right', value, onChange, comparison: true, presets },
    { id: 'notifications', name: 'Notifications', type: 'notifications', placement: 'right', notifications, onClickNotification },
    { id: 'profile-menu', name: 'Profile menu', type: 'profileMenu', placement: 'right', profileName, profileEmail, onSignOut },
  ],
};

<TopBar config={config} />

Segmented (on New)

Show code
import { TopBar, type TopBarConfig } from '@intentwise/primitives/compositions';

// Segmented version switch — Classic / New toggle, currently on "new"
const config: TopBarConfig = {
  items: [
    ...baseItems,
    {
      id: 'version-switch',
      name: 'Version switch',
      type: 'versionSwitch',
      placement: 'right',
      variant: 'segmented',
      data: { current: 'new', tag: 'Beta', tooltip: 'Switch between Classic and the new Beta experience.' },
      onSwitch,
    },
  ],
};

<TopBar config={config} />

Switch to Classic UI (on New)

Show code
import { TopBar, type TopBarConfig } from '@intentwise/primitives/compositions';

// Pill version switch shown while on the new UI — offers switching back to Classic
const config: TopBarConfig = {
  items: [
    ...baseItems,
    {
      id: 'version-switch',
      name: 'Version switch',
      type: 'versionSwitch',
      placement: 'right',
      data: { current: 'new' },
      onSwitch,
    },
  ],
};

<TopBar config={config} />

Legacy (compact)

Show code
import { TopBar, type TopBarConfig } from '@intentwise/primitives/compositions';
import { MessageSquare } from 'lucide-react';

// Compact "legacy" chrome: slim selects, a plain date-range label + preset button,
// a solid/dark icon button, and an avatar-only profile.
const config: TopBarConfig = {
  items: [
    { id: 'overview-select', name: 'Overview', type: 'singleSelect', placement: 'left', options, selected, onChange, widthClassName: 'w-[260px]' },
    { id: 'account-select', name: 'Accounts', type: 'singleSelect', placement: 'left', options, selected, onChange, widthClassName: 'w-[260px]' },
    // Legacy calendar opens a quick-select-only list (no calendar grid). Pass custom presets to control the options.
    // comparison: true adds a "Compare" toggle to the list; enabling it shows the "primary vs comparison" details in the trigger.
    { id: 'date-range', name: 'Date range', type: 'calendar', placement: 'right', value, onChange, presets, comparison: true, comparisonValue, onComparisonChange },
    { id: 'notifications', name: 'Notifications', type: 'notifications', placement: 'right', notifications, onClickNotification },
    // appearance: 'solid' renders the dark, high-contrast icon button
    { id: 'chat', name: 'Chat & support', type: 'icon', placement: 'right', appearance: 'solid', icon: <MessageSquare className="h-4 w-4" />, ariaLabel: 'Open chat & support', onClick },
    // profileImageUrl shows the avatar photo instead of an initials circle
    { id: 'profile-menu', name: 'Profile menu', type: 'profileMenu', placement: 'right', profileName, profileEmail, profileImageUrl, onSignOut },
  ],
};

<TopBar variant="legacy" config={config} />

Tabbed Navigation — UnderlineTabs

Active tab: overview
Show code
import { UnderlineTabs, type TabItem } from '@intentwise/primitives/compositions';

<UnderlineTabs
  items={[
    { id: 'overview', label: 'Overview' },
    { id: 'campaigns', label: 'Campaigns' },
    { id: 'products', label: 'Products' },
    { id: 'insights', label: 'Insights', isBeta: true },
  ] satisfies TabItem[]}
  activeId={activeTabId}
  onChange={setActiveTabId}
/>

KPI Summary — MetricCard

Monthly Revenue
$708.9K
12.50%MoM

Total revenue across all channels

Active Customers
12,847
5.30%MoM
ROAS
4.20x
8.10%WoW
ACoS
18.50%
2.30%MoM

Advertising Cost of Sales

Show code
import { MetricCard } from '@intentwise/primitives/cards';

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  {metricCardSamples.map((data) => (
    <MetricCard key={data.title} data={data} />
  ))}
</div>

Micro Indicators — TrendBadge, SparkLine, SparkBar

TrendBadge

12.5%MoM8.3%MoM0.0%MoM2.1%ACoS

SparkLine

SparkBar

Show code
import { TrendBadge } from '@intentwise/primitives/indicators';
import { SparkLine, SparkBar } from '@intentwise/primitives/indicators';

<TrendBadge data={trend.data} />
<SparkLine data={series.data} autoColor />
<SparkBar data={series.data} />

Progress & Gauges — ProgressBar, CategoryBar, DeltaBar, ProgressCircle

ProgressBar

Ad Spend Pacing45.0%
Budget Utilization72.0%
Over Target95.0%

CategoryBar

Sponsored Products (55.0%)
Sponsored Brands (28.0%)
Sponsored Display (17.0%)

DeltaBar

Revenue Growth

+12.0%

ACoS Change

-8.0%

ProgressCircle

45.0%On Track
72.0%Pacing
95.0%Over
Show code
import { ProgressBar, CategoryBar, DeltaBar } from '@intentwise/primitives/indicators';
import { ProgressCircle } from '@intentwise/primitives/indicators';

<ProgressBar data={bar.data} />
<CategoryBar data={categoryBarData} showLabels />
<DeltaBar data={delta.data} />
<ProgressCircle data={circle.data} size="sm" />

Time Series — AreaChart, LineChart

Show code
import { AreaChart, LineChart } from '@intentwise/primitives/charts';

<AreaChart data={areaChartData} title="Revenue & Ad Spend" height={320} exportable />
<LineChart data={dualAxisChartData} title="Revenue vs Growth Rate" height={320} showDots />

Categorical — BarChart, DonutChart

Show code
import { BarChart, DonutChart } from '@intentwise/primitives/charts';

<BarChart data={barChartData} title="Revenue by Ad Type" height={320} />
<DonutChart data={donutChartData} title="Revenue by Channel" height={320} />

Analytics — ScatterChart, FunnelChart, RadarChart

Show code
import { ScatterChart, FunnelChart, RadarChart } from '@intentwise/primitives/charts';

<ScatterChart data={scatterChartData} title="Ad Spend vs ROAS" height={320} />
<FunnelChart data={funnelChartData} title="Purchase Funnel" height={320} />
<RadarChart data={radarChartData} title="Campaign Health Radar" height={350} />

Specialized — HeatMap, WaterfallChart

Show code
import { HeatMap, WaterfallChart } from '@intentwise/primitives/charts';

<HeatMap data={heatMapData} title="Clicks by Day & Hour" height={320} />
<WaterfallChart data={waterfallData} title="Revenue Waterfall" height={320} />

Lists & Status — BarList, Tracker

Top Search Terms

Keyword revenue attribution

🔍organic dog food
$12.4K
🔍premium cat treats
$9,800
🔍pet supplements
$7,200
🔍natural pet shampoo
$5,100
🔍dog dental chews
$3,400

Campaign Uptime

Last 30 days operational status

22 good
6 warning
2 critical
Show code
import { BarList, Tracker } from '@intentwise/primitives/compositions';

<BarList data={barListData} />
<Tracker data={trackerData} />

Composite — HealthScoreGauge

Account Health Score

Last 30 days performance

78Health
ACoS
22.0%0.0%
CTR
3.500.0%
Conversion Rate
12.0%
TACoS
45.0%0.0%
Show code
import { HealthScoreGauge } from '@intentwise/primitives/charts';

<HealthScoreGauge
  data={healthScoreData}
  title="Account Health Score"
  description="Last 30 days performance"
/>

Tabular — DataTable, ComparisonTable

Campaign Comparison

Side-by-side performance with delta highlighting

Metric
Campaign A(base)
Campaign B
Revenue
$12.5K
$15.8K+26.4%
ROAS
3.20
4.10+28.1%
ACoS
31.3%
24.4%-22.0%
Impressions
450K
520K+15.6%
Clicks
8,500
11,200+31.8%
CTR
1.9%
2.1%+13.8%
Show code
import { DataTable } from '@intentwise/primitives/tables';
import { ComparisonTable } from '@intentwise/primitives/tables';

<DataTable data={dataTableData} title="Top Customers" striped />
<ComparisonTable data={comparisonTableData} title="Campaign Comparison" />

Timeline — TimelineView

Campaign Timeline

Key events and optimization milestones

🚀
Campaign CreatedJan 15, 2024

Initial campaign setup with 50 keywords

Budget IncreasedFeb 1, 2024

Daily budget raised from $50 to $100

Performance DipFeb 15, 2024

CTR dropped below 1.5% threshold

Paused for ReviewMar 1, 2024

Campaign paused pending bid optimization

ReactivatedMar 10, 2024

Keywords optimized, negative keywords added

Record Sales DayMar 25, 2024

$2,500 in attributed sales

Show code
import { TimelineView } from '@intentwise/primitives/compositions';

<TimelineView
  data={timelineData}
  title="Campaign Timeline"
  description="Key events and optimization milestones"
/>

Interaction — CommandPalette

Press ⌘K or click the button to open the command palette.

Show code
import { CommandPalette } from '@intentwise/primitives/compositions';

const [open, setOpen] = useState(false);

<CommandPalette
  data={commandPaletteData}
  open={open}
  onOpenChange={setOpen}
  onSelect={(id) => setOpen(false)}
/>

Composition — TableDataSection

Slot-based layout matching DSP-Web-v2 table pages: filter chip pills, absolute-positioned blue bulk actions bar, and a full-featured table with status badges, currency columns, and totals row.

Filters :
Campaign InfoPerformance
StatusCampaign nameTotal costProduct salesTotal salesImpressions
Total—$10,800$6,780$19,100313,400
ActiveSpring Push$1,200$800$2,40045,200
InactiveBrand Defense$800$400$1,60032,100
ActivePrime Day$5,000$3,200$8,400128,000
ActiveHoliday Sale$3,200$2,100$5,60089,400
InactiveClearance Q1$600$280$1,10018,700
Show code
import { TableDataSection } from '@intentwise/primitives/compositions';

<TableDataSection
  filterChips={filterChips}      // optional filter chip row
  bulkActionsBar={bulkActionsBar} // optional absolute bulk-actions bar
>
  <table>{/* your table markup */}</table>
</TableDataSection>