Installation
Install Luke UI, apply a bundled theme, and render a component.
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-componentsSet 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.