Design System
Components, themes, and layout utilities for React applications.
Luke UI is a React component library for application interfaces. It includes static CSS, two bundled themes, and layout utilities that use the same semantic token contract as the components.
Start building
Install the package, load the shared CSS and one theme, then add the theme classes near the root of your application. Getting started has the complete setup.
Getting started
Install Luke UI, load a theme, and render your first component.
Styling
Use component APIs, recipes, layout utilities, and semantic variables in the right place.
Layout
Build responsive structure with Box and Sprinkles.
Theme your application
Tactile and Paper each provide light and dark modes. The active theme supplies the colours, type, spacing, radii, and depth behind every component.
Theme
Learn what an identity owns and when to author your own.
Colour
Use semantic surfaces and intent roles instead of palette values.
Colour modes
Follow the system setting or force light and dark scopes.
Typography
Use the type scale through Text, Heading, Numeral, and Emoji.
Explore components
Import atoms and composed components from their own package paths, such as @luke-ui/react/button
and @luke-ui/react/text.
Actions
Buttons, links, and controls for user actions.
Forms
Fields and inputs for collecting information.
Typography
Text, headings, numerals, and emoji using one type scale.
Visuals
Icons and visual building blocks.
Feedback
Loading states and system feedback.
Layout
Box and token-aware layout utilities.
Build custom components
Most applications can start with the components above. Primitives are public lower-level APIs for library authors and custom composed components. Use the public token reference to style a custom element without depending on component internals.