open-index/open-npm huggingface dataset:
npm package: @onlive.ai/ui
Description: Framework-agnostic Web Components library for Onlive interfaces.
Author: Onlive.ai
Latest version: 1.9.13

# OnliveUI

![OnliveUI Banner](https://cdn.onlive.site/@onlive.site/ui@latest/gitlab-banner.png)

Framework-agnostic Web Components library for building Onlive interfaces.

- Works across modern frameworks
- Works with npm and CDN delivery
- Fully customizable with CSS tokens and styles
- Includes official light and dark themes
- Built with accessibility in mind

## Links

- Documentation: https://ui.onlive.site
- Source repository: https://gitlab.com/onlive.site/onlive-ui
- Issues: https://gitlab.com/onlive.site/onlive-ui/-/issues

## Installation

If you install from the Onlive GitLab npm registry, configure your project-level `.npmrc` first:

```ini
@onlive.site:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=${NPM_TOKEN}
```

Then install the package:

```bash
npm install @onlive.site/ui
```

## Quick Start (CDN)

```html
<link rel="stylesheet" href="https://cdn.onlive.site/@onlive.site/ui@latest/themes/light.css" />
<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@latest/onlive-ui-autoloader.js"></script>

<ol-button>Click me</ol-button>
```

Use `onlive-ui.js` instead of `onlive-ui-autoloader.js` if you prefer to register all components up front.

## Quick Start (npm + bundler)

```ts
import '@onlive.site/ui/dist/themes/light.css';
import '@onlive.site/ui/dist/components/button/button.js';
import { setBasePath } from '@onlive.site/ui/dist/utilities/base-path.js';

// Point assets to CDN (or your own copied assets folder)
setBasePath('https://cdn.onlive.site/@onlive.site/ui@latest/');
```

## Framework Integrations

### React

```tsx
import { OlButton } from '@onlive.site/ui/dist/react';

export default function App() {
  return <OlButton>Click me</OlButton>;
}
```

For better tree shaking, import per component when possible (for example from `@onlive.site/ui/dist/react/button/index.js`).

### Next.js

Next wrappers are available at `@onlive.site/ui/dist/next`.

```tsx
import { OlButton } from '@onlive.site/ui/dist/next';

export default function Page() {
  return <OlButton>Click me</OlButton>;
}
```

Current peer dependency requirement:

- `next >= 16.0.10`

## Styling and Themes

Available theme files:

- `@onlive.site/ui/dist/themes/light.css`
- `@onlive.site/ui/dist/themes/dark.css`

Available style bundles:

- `@onlive.site/ui/dist/styles/all.css`
- `@onlive.site/ui/dist/styles/*`

## Development

```bash
pnpm dev
```

Starts the local docs/dev server and rebuilds on source changes.

```bash
pnpm build
```

Creates production artifacts.

```bash
pnpm verify
```

Runs formatting checks, lint, and tests.

## Creating Components

```bash
pnpm run create ol-tag-name
```

This scaffolds component source, styles, and docs page.

## Tech Stack

- Component model: Lit
- Build tooling: custom scripts + esbuild
- Test runner: Web Test Runner

## License

MIT