# Lattice UI

> Headless Roblox UI primitives for rbxts/react interfaces.

- Docs: https://docs.astra-void.xyz/lattice-ui/
- Source: https://github.com/astra-void/lattice-ui
- Full text: https://docs.astra-void.xyz/lattice-ui/llms-full.txt
- Every page below is also served as Markdown at its own URL with `.md` appended.

## Overview

- [Lattice UI](https://docs.astra-void.xyz/lattice-ui/index.md): Headless Roblox UI primitives for rbxts/react.

## Getting started

- [Installation](https://docs.astra-void.xyz/lattice-ui/getting-started/installation.md): Add a Lattice UI primitive to an rbxts/react app, by hand or with the lattice CLI.
- [Your first dialog](https://docs.astra-void.xyz/lattice-ui/getting-started/first-dialog.md): Build a controlled, modal dialog step by step with the Dialog primitive.
- [Composition model](https://docs.astra-void.xyz/lattice-ui/getting-started/composition-model.md): The shared compound-component, asChild, and controllable-state model every Lattice UI primitive follows.
- [Package stability](https://docs.astra-void.xyz/lattice-ui/getting-started/package-stability.md): How to read Lattice UI's 0.x lockedstep versions and which packages are stable-direction versus experimental.

## Components

- [Checkbox](https://docs.astra-void.xyz/lattice-ui/components/checkbox.md): A checked-state primitive with indeterminate support, controlled or uncontrolled state, and an optional presence-animated indicator.
- [Radio Group](https://docs.astra-void.xyz/lattice-ui/components/radio-group.md): Single-selection primitive that owns the chosen value, registers items in order, and moves selection across them with gamepad and arrow-key navigation.
- [Switch](https://docs.astra-void.xyz/lattice-ui/components/switch.md): Boolean toggle primitive that owns checked state and animates the thumb between the ends of the track, while your component owns every part of how it looks.
- [Toggle Group](https://docs.astra-void.xyz/lattice-ui/components/toggle-group.md): Selection primitive that coordinates a set of toggle items in single- or multiple-select mode, owning pressed state and motion while you own the item visuals.
- [Slider](https://docs.astra-void.xyz/lattice-ui/components/slider.md): Single-thumb slider primitive that owns clamped, stepped value state and pointer-drag plus keyboard adjustment while you own the track, range, and thumb visuals.
- [Select](https://docs.astra-void.xyz/lattice-ui/components/select.md): Single-value selection primitive that owns open and value state, registers items in order, and anchors popper-positioned content in a portal while you own the visuals.
- [Combobox](https://docs.astra-void.xyz/lattice-ui/components/combobox.md): Single-value selection primitive that owns value state, input filtering, item registration, and popper positioning while you own the visuals.
- [Text Field](https://docs.astra-void.xyz/lattice-ui/components/text-field.md): Single-line text input primitive that owns the value, separates live changes from commit, exposes disabled/readOnly/invalid state, and wires label, description, and message parts together.
- [Textarea](https://docs.astra-void.xyz/lattice-ui/components/textarea.md): Multi-line text input primitive that owns the value, separates change from commit, auto-resizes to its content within row bounds, and wires label, description, and message parts together.
- [Dialog](https://docs.astra-void.xyz/lattice-ui/components/dialog.md): Modal surface primitive that owns open state, focus trapping, layered dismissal, and presence motion while you own the visuals.
- [Popover](https://docs.astra-void.xyz/lattice-ui/components/popover.md): Anchored surface primitive that owns open state, popper positioning, layered dismissal, and presence motion while you own the visuals.
- [Tooltip](https://docs.astra-void.xyz/lattice-ui/components/tooltip.md): Hover- and focus-triggered surface primitive that owns open delay, popper positioning, portal layering, and presence motion while you own the content.
- [Menu](https://docs.astra-void.xyz/lattice-ui/components/menu.md): Anchored action-menu primitive that owns open state, ordered selection movement, popper positioning, and layered dismissal while you own the visuals.
- [Context Menu](https://docs.astra-void.xyz/lattice-ui/components/context-menu.md): Pointer-anchored action menu that opens at the right-click position, owning open state, popper placement, and layered dismissal while you own the visuals.
- [Toast](https://docs.astra-void.xyz/lattice-ui/components/toast.md): Queued notification primitive that owns scheduling, visibility limits, and exit timing while you own the toast surface and its parts.
- [Tabs](https://docs.astra-void.xyz/lattice-ui/components/tabs.md): Tablist primitive that owns the active value, registers triggers in order, moves selection with the arrow keys, and reveals panels with presence motion.
- [Accordion](https://docs.astra-void.xyz/lattice-ui/components/accordion.md): A collapsible disclosure primitive that owns open-value state, single/multiple expansion modes, and per-item presence motion while you own the visuals.
- [Avatar](https://docs.astra-void.xyz/lattice-ui/components/avatar.md): An image-with-fallback primitive that tracks load status, debounces the fallback with a delay, and lets your component own the visuals.
- [Progress](https://docs.astra-void.xyz/lattice-ui/components/progress.md): Progress-value primitive that owns a clamped numeric range and feeds a motion-driven indicator, plus a standalone spinner for indeterminate work.
- [Scroll Area](https://docs.astra-void.xyz/lattice-ui/components/scroll-area.md): Scroll-container primitive that wraps a Roblox ScrollingFrame, tracks its canvas metrics, and drives custom scrollbars and thumbs with overflow-aware visibility.

## Guides

- [Focus management](https://docs.astra-void.xyz/lattice-ui/guides/focus-management.md): How lattice-ui keeps GuiObject selection predictable across overlays — focus scopes, focus nodes, restore snapshots, and ordered selection.
- [Gamepad and input](https://docs.astra-void.xyz/lattice-ui/guides/gamepad-and-input.md): How lattice-ui serves pointer, touch, keyboard, and gamepad players with one input model — ordered selection, engine-driven gamepad navigation, and per-item key handling.
- [Controlled and uncontrolled state](https://docs.astra-void.xyz/lattice-ui/guides/controlled-state.md): Understand the controlled/uncontrolled pattern that every stateful Lattice primitive shares, and when to own the state yourself versus letting the primitive own it.
- [Portals and layers](https://docs.astra-void.xyz/lattice-ui/guides/portals-and-layers.md): Render overlays into the right ScreenGui, order them predictably with DisplayOrder, and coordinate outside-press dismissal — without hard-coding layout math.
- [asChild composition](https://docs.astra-void.xyz/lattice-ui/guides/as-child-composition.md): Merge primitive behavior onto your own host element with asChild and the Slot component, when forwarding props onto the part's own element is not enough.
- [Presence and motion](https://docs.astra-void.xyz/lattice-ui/guides/presence-and-motion.md): How lattice-ui animates GuiObjects — presence reveal/exit, response settling, feedback effects, and the target contracts that keep motion from fighting layout.
- [Motion recipes](https://docs.astra-void.xyz/lattice-ui/guides/motion-recipes.md): A practical catalog of lattice-ui's ready-made motion configs and how to override the transition prop on any animatable component part.
- [Theming](https://docs.astra-void.xyz/lattice-ui/guides/theming.md): How Lattice UI themes work — plain token objects of Color3s and numbers that your components read explicitly through ThemeProvider, useTheme, and useThemeValue.
- [Styling with recipes](https://docs.astra-void.xyz/lattice-ui/guides/styling-with-recipes.md): Style Lattice surfaces with the sx value for one-off theming and createRecipe for reusable variant systems, then attach either to headless primitives.
- [Styling with Vela](https://docs.astra-void.xyz/lattice-ui/guides/styling-with-vela.md): Style headless Lattice primitives with Tailwind-shaped class names using vela-rbxts, the compile-time className transform Lattice's asChild was built to accept.
- [Density and layout](https://docs.astra-void.xyz/lattice-ui/guides/density-and-layout.md): Wire up SystemProvider, scale spacing with density tokens, tone panels with surfaces, and lay out HUDs with Stack, Row, and Grid — all from the same theme scale.
- [Positioning with Popper](https://docs.astra-void.xyz/lattice-ui/guides/positioning-with-popper.md): Anchor floating surfaces to a trigger with a shared placement model, collision-aware flipping, and offset props instead of hand-written screen math.
- [Roblox UI constraints](https://docs.astra-void.xyz/lattice-ui/guides/roblox-ui-constraints.md): The Roblox-specific realities — GuiObject selection, BasePlayerGui portals, ScreenGui ordering and inset, default selection limits — that shape every lattice-ui primitive.

## Reference

- [Runtime](https://docs.astra-void.xyz/lattice-ui/reference/runtime.md): The shared React runtime, slot composition, ref merging, and controllable state primitives every Lattice UI package builds on.
- [Focus](https://docs.astra-void.xyz/lattice-ui/reference/focus.md): A deterministic selection manager for Roblox — focus scopes, focus nodes, focus trapping and restoration, and ordered selection movement.
- [Layer](https://docs.astra-void.xyz/lattice-ui/reference/layer.md): Portals into ScreenGuis, dismissable outside-press layers, and presence mounting for overlays and anchored surfaces in Roblox.
- [Motion](https://docs.astra-void.xyz/lattice-ui/reference/motion.md): Intent-based motion for Roblox UI — presence, response, and feedback hooks, ready-made recipes, target contracts, and a global motion policy.
- [Popper](https://docs.astra-void.xyz/lattice-ui/reference/popper.md): Placement math, layout observers, and a positioning hook for anchoring a content surface to a GuiObject with viewport collision handling.
- [Style](https://docs.astra-void.xyz/lattice-ui/reference/style.md): Theme tokens, recipe and host-prop helpers, and the Box/Text primitives that every styled Lattice UI surface builds on.
- [System](https://docs.astra-void.xyz/lattice-ui/reference/system.md): Density scaling, layout primitives, and surface tones layered on top of the style foundation, wired together by a single SystemProvider.
- [CLI](https://docs.astra-void.xyz/lattice-ui/reference/cli.md): The lattice CLI scaffolds rbxts/react projects and manages @lattice-ui packages, their peers, and providers.
- [Migration](https://docs.astra-void.xyz/lattice-ui/reference/migration.md): Upgrading between breaking Lattice UI releases, with the exact code changes each one requires.
- [Releases](https://docs.astra-void.xyz/lattice-ui/reference/releases.md): Release notes and migration guidance for the lockstep-versioned @lattice-ui packages, summarized from the library changelog.