Getting Started
Install Luke UI and render your first component.
Install
External consumers install the package from the registry.
pnpm add @luke-ui/reactInside this monorepo, use a workspace dependency instead.
{
"dependencies": {
"@luke-ui/react": "workspace:*"
}
}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.
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
For small demos, import the stylesheet and render a component directly.
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
Use themeRootClassName when you need to attach the theme class yourself.
import { themeRootClassName } from '@luke-ui/react/theme';
<div className={themeRootClassName} />;Next steps
- Read Button.
- Read Link.
- Read Loading Spinner.
- Read Combobox Field.
- Read Text.
- Read Icon.