@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"

Quote scoped names ("@sky.ui/…") — required in PowerShell. See powershell-scoped-packages.md.

@sky.ui/core is required — wrappers delegate to the underlying custom elements.

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 Components from 'unplugin-react-components/webpack';
import { SkyUIReactResolver } from '@sky.ui/react/auto-import';
import { SkyUIReactWebpackPlugin } from '@sky.ui/react/webpack';

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

Rollup

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

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

Manual imports

Works with any bundler — no plugin required:

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

Related packages

| Package | Use when | |---------|----------| | @sky.ui/core | Lit custom elements (required peer) | | @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.