# @sky.ui/react

React wrappers for Sky UI web components. Use `<SkyButton />` in JSX with optional auto-import and tree-shaking.

## Install

```bash
npm install "@sky.ui/react" "@sky.ui/core"
# Core runtime peers (required so Vite does not stub empty modules):
npm install lit "@lit-labs/motion" "@lit-labs/virtualizer" "@lit/context" d3 three
```

> Quote scoped names (`"@sky.ui/…"`) — required in PowerShell. See [powershell-scoped-packages.md](https://gitlab.com/sky_ui/sky-ui/-/blob/main/docs/powershell-scoped-packages.md).

`@sky.ui/core` is a **dependency** of this package (npm installs it with `@sky.ui/react`). Peer dependency: `react` (^17 || ^18 || ^19), plus the Core peers above.

## Quick start

```jsx
import { SkyButton, SkyCard } from '@sky.ui/react';

export function App() {
  return <SkyButton label="Save" />;
}
```

## Vite auto-import

Use components in JSX without manual imports; only used components are bundled.

1. Install the resolver plugin:

   ```bash
   npm install unplugin-react-components -D
   ```

2. Configure Vite:

   **Option A — one-line plugin**

   ```ts
   import React from '@vitejs/plugin-react';
   import { SkyUIReactVitePlugin } from '@sky.ui/react/vite';
   import { defineConfig } from 'vite';

   export default defineConfig({
     plugins: [React(), ...SkyUIReactVitePlugin()],
   });
   ```


   **Option B — resolver only**

   ```ts
   import React from '@vitejs/plugin-react';
   import Components from 'unplugin-react-components/vite';
   import { SkyUIReactResolver } from '@sky.ui/react/auto-import';
   import { defineConfig } from 'vite';

   export default defineConfig({
     plugins: [
       React(),
       Components({ resolvers: [SkyUIReactResolver()], dts: true }),
     ],
   });
   ```

3. Use `<SkyButton label="OK" />` without imports. Add generated `components.d.ts` to your `tsconfig` `include`.

## Whole library (no tree-shaking)

```ts
SkyUIReactVitePlugin({ treeShake: false });
```

```ts
import '@sky.ui/react/all';
import * as Sky from '@sky.ui/react';
```

## Webpack and Rollup

**Webpack**

```js
import { SkyUIReactWebpackPlugin } from '@sky.ui/react/webpack';

export default {
  plugins: [
    ...SkyUIReactWebpackPlugin({ dts: true }),
  ],
};
```

**Rollup**

```js
import { SkyUIReactRollupPlugin } from '@sky.ui/react/rollup';

export default {
  plugins: [...SkyUIReactRollupPlugin(), /* JSX plugin, etc. */],
};
```

## Manual imports

Works with any bundler — no plugin required (named exports from barrel and per-component paths):

```jsx
import { SkyButton, SkyCard } from '@sky.ui/react';
// or: import { SkyButton } from '@sky.ui/react/sky-button';
```

## Related packages

| Package | Use when |
|---------|----------|
| [`@sky.ui/core`](https://www.npmjs.com/package/@sky.ui/core) | Lit custom elements (dependency of this package) |
| [`@sky.ui/vue`](https://www.npmjs.com/package/@sky.ui/vue) | Vue wrappers |
| [`@sky.ui.pro/react`](https://www.npmjs.com/package/@sky.ui.pro/react) | Pro-tier React wrappers |

## Editor support

Install the **Sky UI Components** VS Code extension for JSX completions, hover docs, and validation.

## License

[Sky UI Free EULA](https://unpkg.com/@sky.ui/react/LICENSE.md) — proprietary; not open source.