Installation

Quick start

The archive includes React exports, typed props, styles, assets and source. It has not been published to npm.

Install and import

npm install react@19.2.4 react-dom@19.2.4 ./helios-ui-react-0.1.0.tgz

pnpm add react@19.2.4 react-dom@19.2.4 ./helios-ui-react-0.1.0.tgz

yarn add react@19.2.4 react-dom@19.2.4 ./helios-ui-react-0.1.0.tgz

Import an export and the styles

'use client';
import { NativeScope, NativeButton } from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function App() {
  return <NativeScope><NativeButton onClick={() => console.log('Continue')}>Continue</NativeButton></NativeScope>;
}

Framework guides

Use an existing React 19 application and install the downloaded archive with the command above. These examples use its compiled exports; no source alias or Tailwind plugin is required.

// app/layout.tsx
import '@helios-ui/react/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en"><body>{children}</body></html>;
}

// app/page.tsx
'use client';
import { Button } from '@helios-ui/react';
export default function Page() {
  return <Button onClick={() => alert('Action handled')}>Continue</Button>;
}

// src/App.tsx
import { Button } from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function App() {
  return <Button onClick={() => alert('Action handled')}>Continue</Button>;
}

// app/root.tsx
import { Outlet } from 'react-router';
import '@helios-ui/react/styles.css';

export default function Root() { return <Outlet />; }

// app/routes/home.tsx
import { Button } from '@helios-ui/react';
export default function Home() {
  return <Button onClick={() => console.log('Continue')}>Continue</Button>;
}

// src/components/ContinueButton.tsx
import { Button } from '@helios-ui/react';
export default function ContinueButton() {
  return <Button onClick={() => console.log('Continue')}>Continue</Button>;
}

---
// src/pages/index.astro
import ContinueButton from '../components/ContinueButton';
import '@helios-ui/react/styles.css';
---
<ContinueButton client:load />

Monorepos and custom aliases

Install the archive in the workspace that renders the components. Resolve its file path relative to that workspace. For editable source, run the copier from the Helios source checkout and choose a new destination in the consuming application; --to accepts relative or absolute paths.

node helios-ui-site/scripts/copy-component.mjs button --to ./apps/web/src/components/helios-button

The generated USAGE.tsx imports its local barrel. If your application uses an alias, configure that alias in both its TypeScript and bundler settings before changing those imports.

Template assets

The package includes a public-assets folder with all template images/video and the icon sprite. Copy its contents into the host application’s public directory, preserving paths, before using template defaults. Templates accept assetsBase for image paths.

Tech stack

Showcase: Next.js 16 App Router, React 19, TypeScript and Tailwind CSS 4. Component behavior: React Aria, TanStack Table, Motion, and Recharts.

Set a .dark ancestor for dark mode. Accent variables adapt action surfaces and their labels; reduced motion is respected.

Dark mode

Set the theme on a containing element. Use the same stylesheet in both modes. Accent and label colors must be chosen together so labels remain readable; repeating motion also respects the browser’s reduced-motion preference.

<div className="dark">
  <Button>Continue</Button>
</div>

Inspect the color roles and typography before overriding semantic tokens.

Accent color

The shared accent ramp drives action fills, selected states and focus rings. Choose an audited preset or a custom color from the Color foundation. Data-series and status colors retain their semantic meaning. Review contrast for any custom override.

Plans and access

The downloadable archive is a local preview. INR plan cards describe proposals; checkout and paid-license activation remain closed. No registry login, purchase or license token is required for this local archive.