Installation

Install Luke UI

Install Luke UI and React Aria Components. Luke UI uses the application's React Aria Components instance so shared contexts remain compatible.

pnpm add @luke-ui/react react-aria-components

Set up the theme

Import @luke-ui/react/stylesheet.css and one theme stylesheet at your application root. This guide uses Tactile. To use Paper, import @luke-ui/react/themes/paper/stylesheet.css instead.

Apply rootClassName to an element you own, such as the application shell. The theme stylesheet supplies the semantic variables. rootClassName adds the reset and base typography.

import '@luke-ui/react/stylesheet.css';
import '@luke-ui/react/themes/tactile/stylesheet.css';
import { rootClassName } from '@luke-ui/react/theme';
import type { PropsWithChildren } from 'react';

export function App({ children }: PropsWithChildren) {
	return (
		<body className={rootClassName}>
			<header />
			<main>{children}</main>
			<footer />
		</body>
	);
}

Use components

Import each component from its package path.

import { Button } from '@luke-ui/react/button';
import { Text } from '@luke-ui/react/text';

export function Welcome() {
	return (
		<>
			<Text>Welcome to Luke UI.</Text>
			<Button>Continue</Button>
		</>
	);
}

Change the theme

Tactile is the default bundled theme. Paper uses the same component APIs with a flatter visual treatment. Switch which theme stylesheet you import to change the theme.

import '@luke-ui/react/themes/paper/stylesheet.css';
import { rootClassName } from '@luke-ui/react/theme';
import type { PropsWithChildren } from 'react';

export function App({ children }: PropsWithChildren) {
	return <div className={rootClassName}>{children}</div>;
}

Set data-color-mode="light" or data-color-mode="dark" on a themed element when the application must use a specific mode. Without it, Luke UI follows the system preference.

Install Luke UI

Set up the theme

Use components

Change the theme

Continue learning

Styling

Layout

Theming

Components

On this page