Use It

The fastest path to a first screen: install, wrap your app, reach for components and tokens by name. This path never needs to know how the engine under it works — that's the point.

1. Install and render

Get a component on screen in three steps.

• Installation — the package, the peer deps, the Yarn requirement.
• ApollionProvider — wrap your app once; every component reads the theme from context.
• Button — the canonical component; if you read one README first, read this one.

2. Think in tokens, not hex

Colors and spacing are named intent, not literal values. color="danger" survives a rebrand; color="#E12712" doesn't.

• Semantic & Foundation Tokens — the theme.foundation.* aliases product code reaches for.
• Layout Props — the spacing/color/flex prop set every component shares.
• Colors — how a single seed becomes a full accessible palette.

3. Compose, don't wrap

An Apollion leaf is already a flex container. Most <div>s you'd reach for in another library are unnecessary here.

• Composition — when a wrapper is real, and the audit checklist for when it isn't.
• Forms — Field + Input wired to react-hook-form + zod, no boilerplate.
• DataTable — the component to reach for once a list gets large.

4. Get accessibility for free

Contrast, focus, and ARIA roles aren't opt-in extras — they're derived by the engine and baked into the components.

• Accessibility Presets — high-contrast and colorblind-safe palettes.
• Label — the tonal AA pair (onLight) that ships by construction.

Common questions → where to go

Next step

Ready to give your product its own brand and dark mode? Move to Theme It.