# Getting Started (/docs/getting-started)



## Install [#install]

External consumers install the package from the registry.

```bash
pnpm add @luke-ui/react
```

Inside this monorepo, use a workspace dependency instead.

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

## Render a component [#render-a-component]

Apply the Luke UI theme class near the top of your app. Components use it to resolve design-token
CSS variables and scoped reset rules.

```tsx
import lukeUiStyles from '@luke-ui/react/stylesheet.css?url';
import { themeRootClassName } from '@luke-ui/react/theme';
import { Text } from '@luke-ui/react/text';

export function App() {
	return (
		<>
			<link rel="stylesheet" href={lukeUiStyles} />
			<div className={themeRootClassName}>
				<Text>Hello world</Text>
			</div>
		</>
	);
}
```

## Minimal example [#minimal-example]

For small demos, import the stylesheet and render a component directly.

```tsx
import lukeUiStyles from '@luke-ui/react/stylesheet.css?url';
import { Text } from '@luke-ui/react/text';

export function Example() {
	return (
		<>
			<link rel="stylesheet" href={lukeUiStyles} />
			<Text>Hello world</Text>
		</>
	);
}
```

## Manual root class [#manual-root-class]

Use `themeRootClassName` when you need to attach the theme class yourself.

```tsx
import { themeRootClassName } from '@luke-ui/react/theme';

<div className={themeRootClassName} />;
```

## Next steps [#next-steps]

* Read [Button](/docs/components/actions/button).
* Read [Link](/docs/components/actions/link).
* Read [Loading Spinner](/docs/components/feedback/loading-spinner).
* Read [Combobox Field](/docs/components/forms/combobox-field).
* Read [Text](/docs/components/typography/text).
* Read [Icon](/docs/components/visuals/icon).