Getting started

Luke UI is a React component library with static CSS and bundled themes. This guide uses Tactile, then shows the first component inside a themed root.

Installation

1. Install Luke UI

Install the package in your application.

pnpm add @luke-ui/react

Within this monorepo, use a workspace dependency instead.

{
	"dependencies": {
		"@luke-ui/react": "workspace:*"
	}
}

2. Import the CSS

Import the shared stylesheet and the stylesheet for one identity at your application root. This example uses Tactile. To use Paper, import @luke-ui/react/themes/paper.css instead.

3. Add the theme root

Apply themeRootClassName and the matching identity class to the same element. The theme root provides the reset, base typography, and semantic variables for its children.

import '@luke-ui/react/stylesheet.css';import '@luke-ui/react/themes/tactile.css';import { Text } from '@luke-ui/react/text';import { themeRootClassName } from '@luke-ui/react/theme';import { tactileThemeClassName } from '@luke-ui/react/themes';import { cx } from '@luke-ui/react/utils';import type { PropsWithChildren } from 'react';export function App({ children }: PropsWithChildren) {	return (		<div className={cx(themeRootClassName, tactileThemeClassName)}>			<Text>Hello world</Text>			{children}		</div>	);}

4. Use components

Import each component from its package path. The setup above renders Text; Button comes from @luke-ui/react/button.

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 identity. Paper uses the same component APIs with a flatter visual treatment. Switch the CSS import and class together.

import '@luke-ui/react/themes/paper.css';
import { paperThemeClassName } from '@luke-ui/react/themes';

<div className={cx(themeRootClassName, paperThemeClassName)}>{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.

Continue learning