Why AstralUI
A theme engine, not just components.
Every color resolves through --astral-* CSS variables and light-dark(). Switch schemes by flipping one attribute; rebrand the whole app by passing a single color.
Light & dark, free
Both schemes are built into the tokens. No duplicate stylesheets, no theme objects to thread through - set
data-astral-scheme and the entire surface responds.import { ColorSchemeProvider } from '@astralui/core';
<ColorSchemeProvider defaultScheme="dark">
<App />
</ColorSchemeProvider>
One hex, full palette
generateColors() builds a 10-shade palette from a single brand color - try the swatches above.Zero runtime
No CSS-in-JS, no styled-components. Plain CSS variables that the browser resolves natively.
Ships with the essentials
Modal, Drawer, Select, Menu, PinInput, a toast system, a freeze-proof DateInput, and a Spinner - each portalled, accessible, and theme-aware. Bring
react and @tabler/icons-react; that's it.
Components
Everything below is the real shipped CSS.
This page loads @astralui/core straight from the npm CDN. What you see renders from the exact classes the package exports.
Buttons
Status & tags
Running
Paused
Stopped
LABEL
PRO
Inputs
Workspace name
Alerts
Heads up
Brand-tinted informational alert.Approaching the daily limit.
Connection failed. Please try again.
Select menu
Action menu
Code input
Toggle, checkbox & spinner
Status badges
Running
Paused
Failed
Idle
Replied
Search input
Collapsible
Connections sent
Accepted
Replied
Avatars
AB
JD
Charts
68%rate
Funnel bars
Backgrounds
Auth card
Table
| Campaign | Status | Sent | Replies |
|---|---|---|---|
| Q3 Outreach | Active | 1,284 | 412 |
| Founder intros | Paused | 906 | 377 |
| Reactivation | Draft | 0 | 0 |
Tokens
A palette generated from your brand.
Pick a swatch in the playground and this scale regenerates live - the same generateColors() that drives the whole theme.