Distribution

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/distribution.json

npx shadcn@latest add @interlace/distribution

Import

25 named exports — pull the parts you need.

import { ANNOTATION_KINDS, AnnotationKind, Direction, Distribution, MIN_VIEWPORT, NumericPoint, areaPath, axisSlots, bandScales, compact, day, delta, describeDistribution, describeSeries, keepAtNarrow, linePath, nearestIndex, nearestSlot, numeric, peakBin, plotScales, seriesScales, slotAt, stepPath, ticks } from '@/components/ui/charts/distribution';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

<figure data-slot="distribution" data-min-viewport="320" data-peak-bin="14">
    <figcaption>{label}</figcaption>
    <ul data-slot="distribution-legend" />        // only with a reference
    <svg data-slot="distribution-plot" role="img" tabIndex={0}>
      <rect data-slot="distribution-gap" />       // hatched: not measured
      <rect data-slot="distribution-bar" />       // observed
      <path data-slot="distribution-reference" /> // step, never sloped
    </svg>
    <div data-slot="distribution-axis" />         // HTML labels + notes
    <div data-slot="distribution-readout"><output aria-live="polite" /></div>
    <SeriesTable axis="category" />
  </figure>

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Skeleton

Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.

<ANNOTATION_KINDS loading={isPending} />

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Native element semantics — no interaction layer to get wrong.

Focus ring (WCAG 2.2 SC 2.4.13)

Inherited from the preflight focus contract shipped in @interlace/theme.

Reduced motion

No animation to gate.

ARIA in the source

• role="alert"
• role="img"
• aria-label
• aria-live

Examples

10 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

Native / no Base UI dependency

Lucide icons

none

NPM dependencies

none

Registry dependencies

• @interlace/theme
• @interlace/cn
• @interlace/data-state
• @interlace/series-table
• @interlace/skeleton

Source

The full implementation — components/ui/charts/distribution.tsx once installed.

'use client';

import * as React from 'react';

// @interlace/distribution v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/distribution
// What changed since: https://ds.interlace.tools/c/distribution#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — Distribution
 *
 * One quantity spread across a fixed set of bins — hours of the day, days of
 * the week, cohorts, buckets — with an optional REFERENCE distribution drawn
 * over it.
 *
 * ## Why this is not `TimeSeries` with three more props
 *
 * It was attempted that way first. Every part of `TimeSeries` is chronological
 * in a way that cannot be parameterised out:

…706 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.