Accessible, themeable React components for crafting polished web apps and design systems. Server-first, built for the Next.js RSC
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, with 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, enforced at build time and 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 meet them in the docs.
pnpm add astralis-uiEach snippet is the exact source of the preview beside it, as on every docs page.
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.
Everything around the library helps you go from idea to shipped page faster.
Install the package, add the provider, and every component here is yours.