# Astralis UI > A React 19 component library on semantic design tokens: server-first (static components are true Server Components shipping zero client JavaScript, gate-enforced, labeled per component), precompiled prefix-isolated CSS with value props delivered through CSS custom properties (no build tooling required in the consuming app), runtime brand theming, responsive style props (viewport and container-query keys), compound components, and an accent-channel colorScheme system. Install: `pnpm add astralis-ui`. Import `astralis-ui/styles.css` once and wrap the app in ``. Every page below is available as plain markdown at the listed .md URL (full demo source and props tables included). ## Getting Started - [Installation](https://astralis-ui.com/docs/installation.md): Install the package, import one stylesheet, wrap your app. That's the whole setup. - [Quick Start](https://astralis-ui.com/docs/quick-start.md): A working form, theming and responsive layout in about twenty lines. ## Foundations - [Theming](https://astralis-ui.com/docs/theming.md): How tokens, dark mode, the brand color and colorScheme fit together. - [Colors](https://astralis-ui.com/docs/colors.md): The palettes, the role vocabulary every hue shares, and where each is meant to be used. - [Responsive Props](https://astralis-ui.com/docs/responsive.md): Every style prop accepts a breakpoint map: mobile-first, precompiled, zero runtime cost. - [Style Props](https://astralis-ui.com/docs/style-props.md): The design scale as typed props: spacing, color, radius and more on every layout primitive. - [Design Tokens](https://astralis-ui.com/docs/tokens.md): The complete reference of every scale in the system: spacing, sizing, type, radius, shadows and motion. ## Tooling - [CLI](https://astralis-ui.com/docs/cli.md): Scaffold a project, add blocks, generate a static brand theme, validate code against the design system, and connect AI agents with the astralis command-line tool. - [Validate in CI](https://astralis-ui.com/docs/validate-in-ci.md): Run astralis validate before code is committed and on every pull request, so a design-system mistake cannot be merged. - [DevTools](https://astralis-ui.com/docs/devtools.md): A development overlay that inspects any Astralis component on the page, Server Components included, shows the validator's findings live as you edit, and reports a problem to the maintainers with the evidence attached. - [AI Agents](https://astralis-ui.com/docs/ai-agents.md): An MCP server that feeds coding agents Astralis's current component APIs, props, and theming, instead of guesses. ## Buttons - [Button](https://astralis-ui.com/docs/components/button.md): A polymorphic button with six variants, eleven color schemes, icon slots and built-in loading states. - [Button Group](https://astralis-ui.com/docs/components/button-group.md): Groups related buttons, shares its styling with every child, and optionally welds them into a segmented control. - [Floating Button](https://astralis-ui.com/docs/components/floating-button.md): A button pinned above the page, anchored to a corner or edge midpoint, and draggable anywhere. - [Theme Toggle](https://astralis-ui.com/docs/components/theme-toggle.md): A ready-made light/dark switch built on Button, with a cross-fading sun and moon. - [Copy Button](https://astralis-ui.com/docs/components/copy-button.md): A Button that writes a value to the clipboard and confirms with a transient copied state. - [Toolbar](https://astralis-ui.com/docs/components/toolbar.md): A role=toolbar container with arrow-key focus movement. Compose with Buttons, groups and separators. ## Layout - [Box](https://astralis-ui.com/docs/components/box.md): The foundational layout primitive: a polymorphic div with every style token as a typed prop. - [Flex](https://astralis-ui.com/docs/components/flex.md): A Box with flexbox layout props: direction, alignment, wrap and gap as typed tokens. - [Stack](https://astralis-ui.com/docs/components/stack.md): One-dimensional stacking with a consistent gap, plus the HStack and VStack presets. - [Grid](https://astralis-ui.com/docs/components/grid.md): CSS Grid as a Box: tokenized columns, rows, gaps and alignment, with Grid.Item for placement. - [Center](https://astralis-ui.com/docs/components/center.md): A Box that centers its children on both axes. - [Container](https://astralis-ui.com/docs/components/container.md): A centered, max-width wrapper for page and section content. - [Aspect Ratio](https://astralis-ui.com/docs/components/aspect-ratio.md): Locks its child to a fixed aspect ratio, for media, embeds and placeholders. - [Float](https://astralis-ui.com/docs/components/float.md): Anchors content to an edge or corner of its positioned parent: badges, dots, close buttons. - [Separator](https://astralis-ui.com/docs/components/separator.md): A dividing line between content: horizontal or vertical, with semantic role built in. - [Visually Hidden](https://astralis-ui.com/docs/components/visually-hidden.md): Content for assistive technology only: visually removed but still announced. The standard companion for icon-only controls. - [Scroll Area](https://astralis-ui.com/docs/components/scroll-area.md): A scroll container with themed scrollbars: the platform's own, restyled with CSS. Zero client JavaScript. - [Splitter](https://astralis-ui.com/docs/components/splitter.md): A two-panel resizable split: pointer-capture dragging plus the APG window-splitter keyboard contract. ## Typography - [Text](https://astralis-ui.com/docs/components/text.md): The prose primitive: size, weight, color and rhythm as typed tokens, all responsive. - [Heading](https://astralis-ui.com/docs/components/heading.md): Semantic headings built on Text, with per-level size and weight defaults. - [Blockquote](https://astralis-ui.com/docs/components/blockquote.md): A quotation block with an accent rule and optional attribution. - [Code](https://astralis-ui.com/docs/components/code.md): An inline code chip for identifiers and commands in prose. - [Code Block](https://astralis-ui.com/docs/components/code-block.md): A compound multi-line code container with header, copy button and editor chrome. - [Highlight](https://astralis-ui.com/docs/components/highlight.md): Wraps matches of a query in styled elements: search-result emphasis in prose. - [List](https://astralis-ui.com/docs/components/list.md): Semantic lists with tokenized markers, rhythm, and per-item icons. - [Kbd](https://astralis-ui.com/docs/components/kbd.md): A keyboard-key cap for documenting shortcuts. - [Link](https://astralis-ui.com/docs/components/link.md): An inline text link with accent-channel coloring and external-link handling. ## Disclosure - [Accordion](https://astralis-ui.com/docs/components/accordion.md): Stacked sections that expand and collapse: single or multiple open, five visual variants. - [Carousel](https://astralis-ui.com/docs/components/carousel.md): A slide deck with swipe, keyboard nav, autoplay, fractional slides-per-view and fade mode. - [Collapsible](https://astralis-ui.com/docs/components/collapsible.md): A single disclosure that ships zero JavaScript: native details/summary, with exclusive grouping via name. - [Pagination](https://astralis-ui.com/docs/components/pagination.md): Page navigation with smart ellipses, jump controls and a quick-jump input. ## Navigation - [Tabs](https://astralis-ui.com/docs/components/tabs.md): Switchable panels with an animated indicator, five variants and full keyboard support. - [Steps](https://astralis-ui.com/docs/components/steps.md): Multi-step flows with derived statuses, error states and built-in wizard navigation. - [Breadcrumb](https://astralis-ui.com/docs/components/breadcrumb.md): A hierarchy trail with automatic separators and current-page semantics. - [Menu](https://astralis-ui.com/docs/components/menu.md): An action menu on the APG menu-button pattern: roving focus, typeahead, and full keyboard support. - [Context Menu](https://astralis-ui.com/docs/components/context-menu.md): Menu opened by right-click, positioned at the pointer: same items, roving focus and dismissal as Menu. - [Table of Contents](https://astralis-ui.com/docs/components/table-of-contents.md): On-this-page navigation with IntersectionObserver scroll-spy: plain anchor links, enhanced highlight. ## Icon - [Icon](https://astralis-ui.com/docs/components/icon.md): A sizing and coloring wrapper for any icon set: Lucide, Heroicons, or your own SVGs. ## Overlay - [Modal](https://astralis-ui.com/docs/components/modal.md): A focus-trapped dialog for critical actions, with scroll lock and full ARIA wiring. - [Drawer](https://astralis-ui.com/docs/components/drawer.md): An edge-anchored dialog that slides in from any side: settings panels, carts, mobile nav. - [Tooltip](https://astralis-ui.com/docs/components/tooltip.md): Supplementary text on hover or focus: delayed, collision-aware, never interactive. - [Popover](https://astralis-ui.com/docs/components/popover.md): An interactive floating panel anchored to its trigger, for content too rich for a tooltip. - [Popout](https://astralis-ui.com/docs/components/popout.md): An anchored disclosure panel that ships zero JavaScript: native popover plus CSS anchor positioning. - [Alert Dialog](https://astralis-ui.com/docs/components/alert-dialog.md): A Modal that interrupts for a decision: alertdialog semantics, no overlay dismissal, resolution through explicit actions. - [Backdrop](https://astralis-ui.com/docs/components/backdrop.md): The full-screen scrim behind Modal and Drawer, as a standalone primitive for blocking states and custom overlays. - [Hover Card](https://astralis-ui.com/docs/components/hover-card.md): A rich interactive preview on hover intent: the profile-card-on-a-mention pattern, with a pointer grace period. - [Portal](https://astralis-ui.com/docs/components/portal.md): Renders its children into document.body, so overlays escape clipping and stacking from the component that owns them. ## Data Entry - [Input](https://astralis-ui.com/docs/components/input.md): Text inputs with four variants, plus Password, Search and TextArea built in. - [Field](https://astralis-ui.com/docs/components/field.md): The form-field wrapper: label wiring, help text, error messages, and state that flows into any input. - [Checkbox](https://astralis-ui.com/docs/components/checkbox.md): Multi-select control with indeterminate state and a managed group. - [Radio](https://astralis-ui.com/docs/components/radio.md): Single-select options, managed by a group with automatic name wiring. - [Switch](https://astralis-ui.com/docs/components/switch.md): A binary toggle with real switch semantics, for settings that apply immediately. - [Select](https://astralis-ui.com/docs/components/select.md): A custom dropdown with search, groups, clearing, and full keyboard navigation. - [MultiSelect](https://astralis-ui.com/docs/components/multi-select.md): Multi-value selection with removable tags, inline search, and an optional cap. - [Pin Input](https://astralis-ui.com/docs/components/pin-input.md): OTP and PIN entry with auto-advance, smart backspace, and paste spreading. - [Slider](https://astralis-ui.com/docs/components/slider.md): Single and dual-thumb range controls with marks, tooltips and keyboard support. - [Textarea](https://astralis-ui.com/docs/components/textarea.md): A multi-line text field with variants, character count, and Field integration. - [Number Input](https://astralis-ui.com/docs/components/number-input.md): A numeric field with steppers, clamping, and spinbutton keyboard support. - [Combobox](https://astralis-ui.com/docs/components/combobox.md): A filterable single-value picker on the ARIA combobox pattern. - [Segmented Control](https://astralis-ui.com/docs/components/segmented-control.md): A single-choice view switcher built on native radios: platform keyboard handling, styled as connected segments. - [Rating](https://astralis-ui.com/docs/components/rating.md): Star rating input built on native radios, with a static display mode that renders half-stars for fractional values. - [Native Select](https://astralis-ui.com/docs/components/native-select.md): A styled native