# Luke UI

> Luke UI is a React design system built on React Aria Components.

## Overview

- [Installation](https://luke-ui.pages.dev/docs/installation.md): Install Luke UI, apply a bundled theme, and render a component.

## Foundations

- [Composition and customisation](https://luke-ui.pages.dev/docs/composition.md): Choose a Luke UI component, primitive, or token for custom interface patterns.
- [Styling](https://luke-ui.pages.dev/docs/styling.md): Choose component props, recipes, layout utilities, variables, or themes. Do not override internals.
- [Layout](https://luke-ui.pages.dev/docs/layout.md): Build responsive structure with layout utilities and breakpoints.
- [Typography](https://luke-ui.pages.dev/docs/typography.md): Use Luke UI's semantic typography styles through typography components.
- [Iconography](https://luke-ui.pages.dev/docs/iconography.md): Find an icon in the Luke UI set, then use it at the correct size and colour.

## Theming

- [Theming](https://luke-ui.pages.dev/docs/theming.md): Understand how the theme root, identity, colour mode, and tokens fit together.
- [Applying a theme](https://luke-ui.pages.dev/docs/applying-a-theme.md): Load Luke UI CSS and apply the shared root class.
- [Colour](https://luke-ui.pages.dev/docs/color.md): Use semantic surfaces, content roles, and the shared role contract instead of palette values.
- [Authoring a theme](https://luke-ui.pages.dev/docs/authoring-a-theme.md): Compile a curated theme input into a static Luke UI theme stylesheet.
- [Token reference](https://luke-ui.pages.dev/docs/token-reference.md): Public CSS variables to build custom Luke UI elements.

## Guides

- [Forms](https://luke-ui.pages.dev/docs/forms.md): Build an accessible native form from Luke UI's field components, and handle submit and reset.
- [Validation](https://luke-ui.pages.dev/docs/validation.md): Validate a form field, and write the message that tells someone how to fix it.
- [React Hook Form](https://luke-ui.pages.dev/docs/react-hook-form.md): Wire Luke UI fields to React Hook Form with Controller.
- [TanStack Form](https://luke-ui.pages.dev/docs/tanstack-form.md): Wire Luke UI fields to TanStack Form with form.Field.

## Components

- [Components](https://luke-ui.pages.dev/components.md): Every Luke UI component, grouped by category.

## Components: Actions

- [Button](https://luke-ui.pages.dev/components/actions/button.md): A labelled control for actions in an interface.
- [Icon Button](https://luke-ui.pages.dev/components/actions/icon-button.md): A compact icon-only control for an action.
- [Icon Link](https://luke-ui.pages.dev/components/actions/icon-link.md): An icon-only control for navigation.
- [Link](https://luke-ui.pages.dev/components/actions/link.md): A styled link for navigation.

## Components: Feedback

- [Loading Skeleton](https://luke-ui.pages.dev/components/feedback/loading-skeleton.md): Replaces content with a placeholder that keeps its shape while it loads.
- [Loading Spinner](https://luke-ui.pages.dev/components/feedback/loading-spinner.md): Animated indicator for work that is still in progress.

## Components: Forms

- [Checkbox](https://luke-ui.pages.dev/components/forms/checkbox.md): Lets someone select an independent option, with optional supporting and validation text.
- [Combobox Field](https://luke-ui.pages.dev/components/forms/combobox-field.md): Searchable single-select field with label, validation, and option list.
- [Text Field](https://luke-ui.pages.dev/components/forms/text-field.md): Captures a single line of text with a label, validation, and an optional prefix or suffix.

## Components: Layout

- [Aspect ratio](https://luke-ui.pages.dev/components/layout/aspect-ratio.md): Lock media to an inline-to-block ratio.
- [AutoGrid](https://luke-ui.pages.dev/components/layout/auto-grid.md): Arrange direct children in an intrinsic equal-column grid.
- [Box](https://luke-ui.pages.dev/components/layout/box.md): A layout element with responsive Luke UI layout properties.
- [Cluster](https://luke-ui.pages.dev/components/layout/cluster.md): Arrange direct children on the logical inline axis with wrapping.
- [Container](https://luke-ui.pages.dev/components/layout/container.md): Constrain content and establish a local size container.
- [Grid](https://luke-ui.pages.dev/components/layout/grid.md): Arrange direct children in an equal explicit column grid.
- [Scroll Fade](https://luke-ui.pages.dev/components/layout/scroll-fade.md): Indicate overflowing content with a fade.
- [Stack](https://luke-ui.pages.dev/components/layout/stack.md): Arrange direct children on the logical block axis.
- [Track](https://luke-ui.pages.dev/components/layout/track.md): Align supporting content with flexible content on the inline axis.
- [Visually Hidden](https://luke-ui.pages.dev/components/layout/visually-hidden.md): Hide content visually and keep it available to assistive technology.

## Components: Typography

- [Blockquote](https://luke-ui.pages.dev/components/typography/blockquote.md): Block-level quotation from another source.
- [Code](https://luke-ui.pages.dev/components/typography/code.md): Marks text to signify a short fragment of computer code.
- [Em](https://luke-ui.pages.dev/components/typography/em.md): Marks text to stress emphasis.
- [Emoji](https://luke-ui.pages.dev/components/typography/emoji.md): Emoji rendering with a reliable screen reader label.
- [Heading](https://luke-ui.pages.dev/components/typography/heading.md): Semantic heading with automatic level management.
- [Kbd](https://luke-ui.pages.dev/components/typography/kbd.md): Represents keyboard input or a hotkey.
- [Numeral](https://luke-ui.pages.dev/components/typography/numeral.md): Locale-aware number formatting powered by Intl.NumberFormat.
- [Prose](https://luke-ui.pages.dev/components/typography/prose.md): Vertical rhythm and list styling for long-form content.
- [Quote](https://luke-ui.pages.dev/components/typography/quote.md): Short inline quotation.
- [Strong](https://luke-ui.pages.dev/components/typography/strong.md): Marks text to signify strong importance.
- [Text](https://luke-ui.pages.dev/components/typography/text.md): Styled text with semantic typography styles and colour roles.

## Components: Visuals

- [Icon](https://luke-ui.pages.dev/components/visuals/icon.md): SVG icon component backed by the generated spritesheet.

## Components: Primitives

- [Button primitive](https://luke-ui.pages.dev/components/primitives/button.md): Lower-level button styles and behaviour for custom control layouts.
- [Checkbox primitive](https://luke-ui.pages.dev/components/primitives/checkbox.md): Lower-level checkbox anatomy for custom form control layouts.
- [Field primitive](https://luke-ui.pages.dev/components/primitives/field.md): Shared label, description, and validation parts for custom fields.
- [InputGroup primitives](https://luke-ui.pages.dev/components/primitives/input-group.md): Lower-level parts for composing a text input with content at either end.
- [Combobox primitives](https://luke-ui.pages.dev/components/primitives/combobox.md): Lower-level parts for composing a searchable single-select combobox.

## Optional

- [Full documentation](https://luke-ui.pages.dev/llms-full.txt)