84 components · server-first · 0 KB static parts
A React component library on semantic tokens — one brand color restyles everything at runtime. Try it: this whole section is listening.
npx astralis-cli create my-appRecolored by the swatches — no rebuild
Every cell below is live — the same components and tokens you’d ship.
Semantic tokens flip with one class on the root. Flip it now:
One accent channel recolors any component — no per-hue CSS.
Precompiled CSS. No plugins, no config — your bundler just serves a stylesheet.
pnpm add astralis-uiBreakpoint maps on every style prop — resize the window.
Every static component is a true Server Component — build-gate enforced, labeled on every docs page. The same page in five libraries, and the client JS each adds:
Named roles resolve per theme; components never see a hex.
Nothing below is a screenshot — hover to pause, then go meet them in the docs.
pnpm add astralis-uiEach snippet is the literal source of the preview beside it — the same guarantee every docs page makes.
One invalid flag restyles the field and swaps the message.
"use client";
import { useState } from "react";
import { Field, Input, Switch, VStack } from "astralis-ui";
export function FieldError() {
const [invalid, setInvalid] = useState(true);
return (
<VStack gap="5" alignItems="stretch" w="full" maxW="xs">
<Switch checked={invalid} onChange={(e) => setInvalid(e.target.checked)} size="sm">
Simulate a validation error
</Switch>
{/* One `invalid` flag restyles the input and swaps the message. */}
<Field invalid={invalid} required>
<Field.Label>Username</Field.Label>
<Input placeholder="astro_naut" />
{invalid ? (
<Field.ErrorText>That username is already taken.</Field.ErrorText>
) : (
<Field.HelpText>Letters, numbers and underscores only.</Field.HelpText>
)}
</Field>
</VStack>
);
}That username is already taken.
Install the package, wrap your app in the provider, and every component on this site is yours.