Introduction

Astralis UI is a React component library built on semantic design tokens, with runtime brand theming, first-class dark mode and responsive props on every layout primitive.

Why Astralis#

• Zero build step. The library ships precompiled CSS — import one stylesheet and every component works. Your app never runs plugins, preprocessors or a theme compiler.
• Runtime theming. Hand AstralisProvider a single brand color and the full shade scale, hover states and focus rings are derived at runtime. This page's accent color works exactly that way.
• One accent channel, eleven hues. Components expose a colorScheme prop backed by CSS-variable indirection, so any component recolors to any palette without shipping per-hue styles.
• Responsive props. Layout and typography accept breakpoint maps — size={{ base: "sm", md: "lg" }} — resolved to precompiled classes with zero runtime cost.
• Compound components. Complex components split into composable parts (Card.Header, Card.Body) that inherit context from their root.

How these docs work#

Every component page pairs live, rendered examples with their exact source — the code tab shows the file that is actually running, so examples can never drift. Docs pages are being added one at a time; entries marked soon in the sidebar show what's coming.

Start with the Button — the first fully documented component — or head to the theming guide (soon) to see the token system.

The stack#