Quick Start

A working form, theming and responsive layout in about twenty lines. This assumes Astralis is installed, via either the three installation steps, or one command:

npx astralis-cli create my-app   # new project
npx astralis-cli init            # existing one

Your first component#

Everything imports from one place:

import { Button } from "astralis-ui";

<Button colorScheme="blue">Save changes</Button>;

Every interactive component ships styled and accessible out of the box: hover, focus ring, keyboard behavior and dark mode are already handled.

A real slice of UI#

Here's a small signup card combining a compound component (Card), form plumbing (Field + Input), layout (VStack) and feedback (Alert). Note what's absent: no CSS file, no class soup, no wiring between the label, help text and input: Field connects them (including aria-describedby) automatically.

Create account

Start your 14-day trial.

"use client";

import { useState } from "react";
import { Alert, Box, Button, Card, Field, Input, VStack } from "astralis-ui";

export function QuickStartForm() {
  const [sent, setSent] = useState(false);

  return (
    <Box w="full" maxW="sm">
      <Card>
        <Card.Header>
          <Card.Title>Create account</Card.Title>
          <Card.Description>Start your 14-day trial.</Card.Description>
        </Card.Header>
        <Card.Body>
          <form
            onSubmit={(event) => {
              event.preventDefault();
              setSent(true);
            }}
          >
            <VStack gap="4" alignItems="stretch">
              <Field required>
                <Field.Label>Email</Field.Label>
                <Input type="email" name="email" placeholder="you@example.com" />
                <Field.HelpText>We&apos;ll send a confirmation link.</Field.HelpText>
              </Field>
              {sent && (
                <Alert status="success">
                  <Alert.Title>Check your inbox</Alert.Title>
                </Alert>
              )}
              <Button type="submit" fullWidth>
                Sign up
              </Button>
            </VStack>
          </form>
        </Card.Body>
      </Card>
    </Box>
  );
}

Recolor anything#

Components take a colorScheme prop: eleven hues plus four status aliases (error, warning, success, info), with no extra CSS shipped for any of them:

<Button colorScheme="purple">Purple</Button>
<Badge colorScheme="green">Active</Badge>
<Tabs colorScheme="teal">…</Tabs>

And the whole library recolors at once if you hand the provider your brand color. Shades, hover states and a readable text color are derived at runtime:

<AstralisProvider tokens={{ brandColor: "#8b5cf6" }}>

How both of these work is the Theming page.

Layout with style props#

Layout primitives (Box, Flex, Stack, Grid, …) expose the design scale as typed props, and every one of them accepts a responsive map:

<Flex
  direction={{ base: "column", md: "row" }}
  gap={{ base: "4", lg: "8" }}
  p="6"
  rounded="xl"
  bg="subtle"
>
  <Box flex="1">Main</Box>
  <Box w={{ base: "full", md: "64" }}>Sidebar</Box>
</Flex>

Values autocomplete in your editor, and anything off the scale is a type error. See Style Props and Responsive Props.

Dark mode#

Already working. The provider tracks the system preference by default; to give users a control, drop in the ready-made Theme Toggle, or read and set it yourself:

import { useTheme } from "astralis-ui";

const { resolvedTheme, setTheme } = useTheme();
setTheme(resolvedTheme === "dark" ? "light" : "dark");

Don't build the page from scratch#

Blocks are whole sections (navbars, pricing tables, dashboard shells) assembled from the same components. The CLI copies one into your project as source you own:

npx astralis-cli add pricing-01

Where to go next#

Theming: how tokens, dark mode and the brand color work.
Style Props: the full prop-based styling system.
CLI: scaffolding, blocks, and static theme generation.
AI agents: point your coding agent at these docs so it writes against the real API.
Any component page in the sidebar: each pairs live examples with the exact source that renders them.