# Astralis UI

> A React 19 component library on semantic design tokens: precompiled prefixed CSS (no build tooling required in the consuming app), runtime brand theming, responsive style props, compound components, and an accent-channel colorScheme system.

Install: `pnpm add astralis-ui` — import `astralis-ui/styles.css` once and wrap the app in `<AstralisProvider>`.

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-zeta.vercel.app/docs/installation.md): Install the package, import one stylesheet, wrap your app — that's the whole setup.
- [Quick Start](https://astralis-zeta.vercel.app/docs/quick-start.md): A working form, theming and responsive layout in about twenty lines.

## Foundations

- [Theming](https://astralis-zeta.vercel.app/docs/theming.md): How tokens, dark mode, the brand color and colorScheme fit together.
- [Colors](https://astralis-zeta.vercel.app/docs/colors.md): The palettes, the role vocabulary every hue shares, and where each is meant to be used.
- [Responsive Props](https://astralis-zeta.vercel.app/docs/responsive.md): Every style prop accepts a breakpoint map — mobile-first, precompiled, zero runtime cost.
- [Style Props](https://astralis-zeta.vercel.app/docs/style-props.md): The design scale as typed props — spacing, color, radius and more on every layout primitive.
- [Design Tokens](https://astralis-zeta.vercel.app/docs/tokens.md): The complete reference of every scale in the system — spacing, sizing, type, radius, shadows and motion.

## Buttons

- [Button](https://astralis-zeta.vercel.app/docs/components/button.md): A polymorphic button with six variants, eleven color schemes, icon slots and built-in loading states.
- [Button Group](https://astralis-zeta.vercel.app/docs/components/button-group.md): Groups related buttons, shares their styling via context, and optionally welds them into a segmented control.
- [Theme Toggle](https://astralis-zeta.vercel.app/docs/components/theme-toggle.md): A ready-made light/dark switch built on Button, with a cross-fading sun and moon.

## Layout

- [Box](https://astralis-zeta.vercel.app/docs/components/box.md): The foundational layout primitive — a polymorphic div with every style token as a typed prop.
- [Flex](https://astralis-zeta.vercel.app/docs/components/flex.md): A Box with flexbox layout props — direction, alignment, wrap and gap as typed tokens.
- [Stack](https://astralis-zeta.vercel.app/docs/components/stack.md): One-dimensional stacking with a consistent gap — plus the HStack and VStack presets.
- [Grid](https://astralis-zeta.vercel.app/docs/components/grid.md): CSS Grid as a Box — tokenized columns, rows, gaps and alignment, with Grid.Item for placement.
- [Center](https://astralis-zeta.vercel.app/docs/components/center.md): A Box that centers its children on both axes.
- [Container](https://astralis-zeta.vercel.app/docs/components/container.md): A centered, max-width wrapper for page and section content.
- [Aspect Ratio](https://astralis-zeta.vercel.app/docs/components/aspect-ratio.md): Locks its child to a fixed aspect ratio — for media, embeds and placeholders.
- [Float](https://astralis-zeta.vercel.app/docs/components/float.md): Anchors content to an edge or corner of its positioned parent — badges, dots, close buttons.
- [Separator](https://astralis-zeta.vercel.app/docs/components/separator.md): A dividing line between content — horizontal or vertical, with semantic role built in.

## Typography

- [Text](https://astralis-zeta.vercel.app/docs/components/text.md): The prose primitive — size, weight, color and rhythm as typed tokens, all responsive.
- [Heading](https://astralis-zeta.vercel.app/docs/components/heading.md): Semantic headings built on Text, with per-level size and weight defaults.
- [Blockquote](https://astralis-zeta.vercel.app/docs/components/blockquote.md): A quotation block with an accent rule and optional attribution.
- [Code](https://astralis-zeta.vercel.app/docs/components/code.md): An inline code chip for identifiers and commands in prose.
- [Code Block](https://astralis-zeta.vercel.app/docs/components/code-block.md): A compound multi-line code container with header, copy button and editor chrome.
- [Highlight](https://astralis-zeta.vercel.app/docs/components/highlight.md): Wraps matches of a query in styled <mark> elements — search-result emphasis in prose.
- [List](https://astralis-zeta.vercel.app/docs/components/list.md): Semantic lists with tokenized markers, rhythm, and per-item icons.
- [Kbd](https://astralis-zeta.vercel.app/docs/components/kbd.md): A keyboard-key cap for documenting shortcuts.
- [Link](https://astralis-zeta.vercel.app/docs/components/link.md): An inline text link with accent-channel coloring and external-link handling.

## Disclosure

- [Accordion](https://astralis-zeta.vercel.app/docs/components/accordion.md): Stacked sections that expand and collapse — single or multiple open, five visual variants.
- [Carousel](https://astralis-zeta.vercel.app/docs/components/carousel.md): A slide deck with swipe, keyboard nav, autoplay, fractional slides-per-view and fade mode.
- [Pagination](https://astralis-zeta.vercel.app/docs/components/pagination.md): Page navigation with smart ellipses, jump controls and a quick-jump input.

## Navigation

- [Tabs](https://astralis-zeta.vercel.app/docs/components/tabs.md): Switchable panels with an animated indicator, five variants and full keyboard support.
- [Steps](https://astralis-zeta.vercel.app/docs/components/steps.md): Multi-step flows with derived statuses, error states and built-in wizard navigation.
- [Breadcrumb](https://astralis-zeta.vercel.app/docs/components/breadcrumb.md): A hierarchy trail with automatic separators and current-page semantics.
- [Menu](https://astralis-zeta.vercel.app/docs/components/menu.md): An action menu on the APG menu-button pattern — roving focus, typeahead, and full keyboard support.

## Icon

- [Icon](https://astralis-zeta.vercel.app/docs/components/icon.md): A sizing and coloring wrapper for any icon set — Lucide, Heroicons, or your own SVGs.

## Overlay

- [Modal](https://astralis-zeta.vercel.app/docs/components/modal.md): A focus-trapped dialog for critical actions, with scroll lock and full ARIA wiring.
- [Drawer](https://astralis-zeta.vercel.app/docs/components/drawer.md): An edge-anchored dialog that slides in from any side — settings panels, carts, mobile nav.
- [Tooltip](https://astralis-zeta.vercel.app/docs/components/tooltip.md): Supplementary text on hover or focus — delayed, collision-aware, never interactive.
- [Popover](https://astralis-zeta.vercel.app/docs/components/popover.md): An interactive floating panel anchored to its trigger — for content too rich for a tooltip.

## Data Entry

- [Input](https://astralis-zeta.vercel.app/docs/components/input.md): Text inputs with four variants, plus Password, Search and TextArea built in.
- [Field](https://astralis-zeta.vercel.app/docs/components/field.md): The form-field wrapper — label wiring, help text, error messages, and state that flows into any input.
- [Checkbox](https://astralis-zeta.vercel.app/docs/components/checkbox.md): Multi-select control with indeterminate state and a managed group.
- [Radio](https://astralis-zeta.vercel.app/docs/components/radio.md): Single-select options, managed by a group with automatic name wiring.
- [Switch](https://astralis-zeta.vercel.app/docs/components/switch.md): A binary toggle with real switch semantics — for settings that apply immediately.
- [Select](https://astralis-zeta.vercel.app/docs/components/select.md): A custom dropdown with search, groups, clearing, and full keyboard navigation.
- [MultiSelect](https://astralis-zeta.vercel.app/docs/components/multi-select.md): Multi-value selection with removable tags, inline search, and an optional cap.
- [Pin Input](https://astralis-zeta.vercel.app/docs/components/pin-input.md): OTP and PIN entry with auto-advance, smart backspace, and paste spreading.
- [Slider](https://astralis-zeta.vercel.app/docs/components/slider.md): Single and dual-thumb range controls with marks, tooltips and keyboard support.
- [Textarea](https://astralis-zeta.vercel.app/docs/components/textarea.md): A multi-line text field with variants, character count, and Field integration.
- [Number Input](https://astralis-zeta.vercel.app/docs/components/number-input.md): A numeric field with steppers, clamping, and spinbutton keyboard support.
- [Combobox](https://astralis-zeta.vercel.app/docs/components/combobox.md): A filterable single-value picker on the ARIA combobox pattern.

## Data Display

- [Card](https://astralis-zeta.vercel.app/docs/components/card.md): A content container with header, body and footer sections in four variants.
- [Tag](https://astralis-zeta.vercel.app/docs/components/tag.md): Chips for labels and filters — closable, checkable, and groupable.
- [Image](https://astralis-zeta.vercel.app/docs/components/image.md): Images with aspect ratios, captions, error fallbacks, and a built-in lightbox.
- [Calendar](https://astralis-zeta.vercel.app/docs/components/calendar.md): A month grid with single, multiple and range selection, locales and date constraints.
- [Data List](https://astralis-zeta.vercel.app/docs/components/data-list.md): Key–value pairs in a semantic description list, horizontal or stacked.
- [Marquee](https://astralis-zeta.vercel.app/docs/components/marquee.md): An infinitely scrolling strip for logos and highlights — CSS-driven, pausable, gradient-masked.
- [QR Code](https://astralis-zeta.vercel.app/docs/components/qr-code.md): Client-side SVG QR codes with logo overlays, lifecycle states and download.
- [Avatar](https://astralis-zeta.vercel.app/docs/components/avatar.md): User images with graceful fallbacks, status badges, and overlapping groups.
- [Badge](https://astralis-zeta.vercel.app/docs/components/badge.md): A small status label in the standard variant and color-scheme families.
- [Stat](https://astralis-zeta.vercel.app/docs/components/stat.md): A single metric with label, value, help text and a trend indicator.
- [Table](https://astralis-zeta.vercel.app/docs/components/table.md): A semantic table with striping, hover states, sticky headers and two variants.
- [Timeline](https://astralis-zeta.vercel.app/docs/components/timeline.md): A vertical sequence of events with indicators, connectors and per-item colors.

## Feedback

- [Alert](https://astralis-zeta.vercel.app/docs/components/alert.md): A status banner for inline feedback — info, success, warning, and error.
- [Progress](https://astralis-zeta.vercel.app/docs/components/progress.md): Determinate or indeterminate progress, as a linear bar or a circular ring.
- [Skeleton](https://astralis-zeta.vercel.app/docs/components/skeleton.md): A pulsing placeholder that holds space while content loads.
- [Spinner](https://astralis-zeta.vercel.app/docs/components/spinner.md): An indeterminate loading indicator with a screen-reader label built in.
- [Toast](https://astralis-zeta.vercel.app/docs/components/toast.md): Ephemeral notifications fired imperatively from anywhere — no context, no wiring.

## Full corpus

- [llms-full.txt](https://astralis-zeta.vercel.app/llms-full.txt): every guide and component page inlined in one file