@sky.ui/react

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

Install

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.

@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

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:

   npm install unplugin-react-components -D

2. Configure Vite:

   Option A — one-line plugin

   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

   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)

SkyUIReactVitePlugin({ treeShake: false });

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

Webpack and Rollup

Webpack

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

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

Rollup

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):

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

Related packages

| Package | Use when | |---------|----------| | @sky.ui/core | Lit custom elements (dependency of this package) | | @sky.ui/vue | Vue wrappers | | @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 — proprietary; not open source.