Atomv0.25.1
Atom v0.25.1

Behavior at the smallest useful unit.

Accessible, headless React primitives for keyboard, touch, focus, state, and screen-reader semantics—ready for the visual system only you can design.

Get startedExplore primitives
npm install @flowstack-ui/atom
  • React 18 + 19
  • Headless
  • MIT licensed

Interaction field

One contract, every input.

Live system

Roving focus

Arrow keys move intentionally. Enter and Space activate without pointer assumptions.
ArrowRight
Contract confidence
One behavior, every input

Accessibility is not a layer added later.

Atom makes input modality, semantics, state, and focus part of each primitive’s behavioral contract. Your product supplies the visual language without rebuilding the interaction system.

Keyboard

Orientation, roving focus, activation, escape, and typeahead behavior follow the primitive contract.

Touch

Coarse-pointer targets, gesture intent, dismissal, and mobile focus behavior are designed deliberately.

Screen readers

Names, roles, descriptions, relationships, and live state remain part of the public API.

Focus

Containment, initial focus, return focus, and nested overlays cooperate instead of competing.
Headless by design

The contract stays. The expression is yours.

One accessible anatomy can become a quiet editorial control, a dense application tool, or a completely new brand. Atom carries the behavior without choosing the paint.

Style the primitives
Signaldata-state="checked"
Minimalsame anatomy
Systemsame behavior
The Flowstack foundation

A particle becomes a system.

Choose the layer that matches what your product wants to own. Each one points upward without pulling product policy into the foundation.

  1. 01
    AtomBehavior, semantics, state, focus, and interaction.
    Explore Atom
  3. 02
    BrickFinished components and a semantic visual contract.
    Explore Brick
  5. 03
    Your productBrand, content, routes, data, workflows, and decisions.
    Compose your product
Primitive families

Small contracts. Serious interfaces.

From a single press target to navigable data structures and layered application surfaces, Atom keeps behavior composable and explicit.

Browse all primitives
Actions + inputButton · Field · Input · Slider
SelectionCheckbox · Select · Listbox
OverlaysDialog · Drawer · Popover
NavigationMenu · Tabs · Sidebar
CollectionsData Grid · Tree · Virtualizer
UtilitiesPortal · Direction · Hidden
75public subpaths
Common questions

Know where the boundary is before you build.

The shortest answers to the questions that determine whether Atom is the right foundation for your interface.

No. Atom owns accessible behavior, semantics, state, focus, positioning, and interaction contracts. Your application owns the complete visual expression.

Start with behavior you do not have to rediscover.

Install Atom, choose a primitive, and make the presentation unmistakably yours.

npm install @flowstack-ui/atom
Read the guide