Nine Alpha Component Families for Product Interfaces

Nord 5.1 introduces nine alpha component families for the product interfaces teams build most often: data-heavy workspaces, conversational flows, editing surfaces, and responsive layouts.

The release is deliberately marked alpha. These components are ready for early product adoption and feedback, but their APIs may evolve as teams use them in production-shaped interfaces. Existing stable components keep their current APIs.

Build richer data and content surfaces

Chart provides composable cartesian and circular visualizations: line, area, grouped bar, stacked bar, pie, donut, axes, legends, tooltips, and crosshairs. It includes an accessible data alternative and loads the rendering pieces a composition actually needs.

Data Table provides a headless, virtualized table foundation with sorting, filtering, selection, column sizing, pinning, and row expansion.

Data Table Filter Bar adds composable controls for building table query interfaces.

Rich Text Editor provides editor, toolbar, command, and content primitives backed by TipTap, so products can compose the editing controls they need rather than inherit one fixed toolbar.

Build conversation and workflow interfaces

Chat provides message lists, bubbles, metadata, system messages, composer input, attachments, tokens, tool calls, dictation controls, and scroll-to-latest behaviour. It supplies the interaction structure while applications retain ownership of data, permissions, and submission.

Input Group composes controls with add-ons and shared sizing, making compact search, currency, and inline-action fields easier to build consistently.

Overflow List keeps a constrained row useful by moving excess items into an accessible menu instead of letting the layout wrap or clip unpredictably.

Adapt layouts without local one-off patterns

Resizable provides keyboard-accessible, composable resize handles and panels for split views.

Timestamp presents dates and times with locale-aware formatting and clear semantic markup.

Try alpha components deliberately

Start with a bounded screen or feature where your team can give feedback quickly. Keep the component imports explicit, follow the composition examples in each component page, and retain visual-regression coverage around the states that matter to your product. We will use that feedback to stabilize APIs before these families graduate from alpha.

For exact version details, see the Web Components changelog.