Gluon browser package · 1.10.0

@gluonjs/atoms

Accessible focused UI primitives and reusable Gluon theme styles.

Install and start

Install the public package at the same version as the rest of the Gluon train:

npm install @gluonjs/atoms

import { AspectRatio, Avatar, ScrollArea, Separator, installUi } from '@gluonjs/atoms';

const ui = installUi(document, { theme: 'light' });
const media = AspectRatio({ ratio: 4 / 3, children: 'Product media' });
const avatar = Avatar({ alt: 'Ada Lovelace', fallback: 'AL', status: 'error' });
const history = ScrollArea({ label: 'Order history', children: 'Order rows' });
const rule = Separator({ decorative: true });
console.log(media, avatar, history, rule, ui.theme);

Purpose

Accessible focused UI primitives and reusable Gluon theme styles.

Use cases

• Focused UI primitives and shared theming boundaries.
• Accessible form controls, image/fallback presentation, bounded native scrolling, separators, and theme installation.
• Shared styles for browser-facing Gluon interfaces.

Public entry points

Only these package exports are part of the supported public boundary.

• @gluonjs/atoms

Dependencies and peers

API reference

Open an entry point above for generated symbol documentation and a reviewed example for every public symbol. Application code must import from this package entry point, never from repository source paths.

Scope and limits

• Does not own larger compositions or app shell layout.
• Depends on Quarks for native primitives and Core for runtime ownership.

Related guides

• Components
• Accessibility

Verified integration notes

• Depends on `@gluonjs/core` and `@gluonjs/quarks`.
• Browser package with a single public export.

Read the complete @gluonjs/atoms README →