Skip to content
Atlas Component reference · v3.2

Showcase

Every primitive, exactly once.

A reference page that exercises every common HTML element in the platform. Use it to verify rendering, accessibility, and theme behaviour across the full surface area of the design system.

Last reviewed April 30, 2026 by the Atlas team. Reach out at hello@atlas.example or +61 400 000 000 .

Interactive

Buttons, links, disclosures, and dialogs.

External link · Internal route · Anchor jump · Email · Phone

What does the compiler do with disclosures?

Native <details> and <summary> use no JavaScript. They should survive compilation as semantic containers.

Confirm action

This is a static dialog rendered into the page for visual reference. Production dialogs open via the showModal() API.

Media

Video, audio, responsive images, canvas, and inline SVG.

Your browser does not support embedded video.
A short product walkthrough, captioned and chapter-marked.
The Atlas onboarding voiceover, sixty seconds.
An abstract gradient render used as a system mascot
An art-directed responsive image, three breakpoints.
Canvas fallback text for assistive technology.
A sparkline drawn into a <canvas> by the dashboard runtime.
An inline SVG diagram with paths, circles, rects, text, and grouped layers.

Forms

The complete input vocabulary, grouped by role.

Account

Display name

Email

Password

Search

Profile

Phone

Website

Date of birth

Brand colour

Avatar

Preferences

Plan tier

Bio

Seats 12

Project count

Subscribe to changelog updates

Theme

Light

Dark

System

Storage used

62%

Reliability

86%

Tables

Tabular data with structural semantics.

Q1 2026 component adoption by surface
Component Web Admin Mobile
Button 1,204 892 448
Input 980 721 312
Dialog 148 192 61
Table 72 410 14
Total 2,404 2,215 835

Inline semantics

Inline elements that carry meaning beyond styling.

The release went out on April 15, 2026 , marked with three security fixes and one new feature flag alongside the deprecated retry behaviour .
To open the command palette press Cmd + K . The shortcut is registered against the variable shortcutMap.openPalette and emits the sample event { "type": "palette.open" } . Reach the underlying API via atlas.commands.run("palette.open") .
Per WCAG 2.2 — see

Understanding WCAG 2.2

— every interactive control must be reachable. All functionality must be operable through a keyboard interface.
Atomic notation: H 2 O. Exponent notation: E = mc 2 . The constant c is the speed of light in metres per second.
Mixed-script line:
東京 Tōkyō
renders the reading above the base. Bidirectional content: اَلْعَرَبِيَّة sits inline with English. Force override: override left-to-right context .

Block semantics

Document-level structures that aren't navigation, header, or footer.

The shape of an article

Posted March 20, 2026

Articles carry their own header, body, and optional footer. They nest cleanly inside a section so search engines can promote them as standalone documents.

const atlas = createAtlas({
  theme: "dark",
  surface: "admin",
});

atlas.mount("#root");

The system is the source of truth. The components are the dialect.

— Atlas, Principles, §1
Atlas Systems 12 Foveaux Street Surry Hills NSW 2010 hello@atlas.example

Lists

Ordered, unordered, descriptive, and deeply nested.

Unordered

  • Buttons
  • Forms
  • Tables

Ordered

  1. Define the token
  2. Implement the primitive
  3. Compose the pattern

Description

Primitive
A single-purpose component without composition surface.
Pattern
A canonical arrangement of primitives that solves a recurring task.
Surface
A deployment context — web, admin, mobile, embedded.

Deeply nested

  • Surfaces
    • Web
      • Marketing
      • Application
      • Documentation
    • Admin
      • Dashboard
      • Settings
  • Channels
    • Email
    • Push