> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ada.cx/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ada.cx/_mcp/server.

# Getting started

This guide takes you from an empty project to a rendered Lovelace component.

## Requirements

* React 19 and React DOM 19. The peer dependency range is `^19.0.0` and earlier versions are not supported.
* A bundler or dev server that can import plain `.css` files. Vite, Next.js, and webpack with `css-loader` all qualify.

## 1. Install the package

```sh
npm install @ada-cx/lovelace react react-dom
```

> **Note**
>
> [`@ada-cx/lovelace`](https://www.npmjs.com/package/@ada-cx/lovelace) is live on npm. Install the latest version. A release can change or remove a component's props. Pin the version you tested against, and upgrade deliberately.

## 2. Import both stylesheets

Import both stylesheets once, at your app entry:

```ts
import "@ada-cx/lovelace/tokens.css";
import "@ada-cx/lovelace/style.css";
```

Both imports are required:

* `tokens.css` defines the `--lovelace-*` custom properties inside `@layer lovelace.tokens`. It carries every design value: colors, fonts, spacing, radii.
* `style.css` holds all component styles in one file. Those styles only reference the custom properties through `var()`.

> **Warning**
>
> A JS-only import renders unstyled components. The library build extracts all component CSS to `style.css`, so importing components without the stylesheets produces bare, unthemed markup.

## 3. Wrap your UI in LovelaceProvider

`LovelaceProvider` is the prescribed entry point for consuming Lovelace.

```tsx
import { LovelaceProvider, Button } from "@ada-cx/lovelace";

export function App() {
  return (
    <LovelaceProvider theme="auto">
      <Button variant="primary">Send</Button>
    </LovelaceProvider>
  );
}
```

The provider does three jobs:

* It resolves the color scheme (`light`, `dark`, or `auto`) and stamps `data-theme` on its wrapper. `auto` follows the OS preference live.
* It applies [token overrides](/lovelace/theming#override-tokens-per-brand) from its `override` prop.
* It keeps React Aria overlay portals (Dialog, Sheet, Tooltip) inside the theme boundary.

Components render without the provider, and `data-theme` defaults to light. Without the provider you own theme switching and portal scoping yourself.

## 4. Verify the result

Run your dev server. You should see a filled accent button labeled "Send". Hover and keyboard focus states style themselves through `data-*` attributes.

If the button renders as unstyled text, one or both stylesheet imports are missing. Check step 2.

## Next steps

* Try your brand on live components in the [theme playground](/lovelace/theming#theme-playground).
* Rebrand the components with [token overrides](/lovelace/theming).
* Browse the [component catalog](/lovelace/components), where each component has a live preview.
* Wire the components to a live conversation in [Build a custom chat UI](/lovelace/build-a-custom-chat-ui).