Welcome to Helios UI Pro

Start from zero

This walkthrough starts with a React 19 project. Follow the steps in order to install the shared package, connect its styles and use your first component or template.

1. 1

   Open your project — or create a new one.

   Use a React 19 application. The showcase uses Next.js App Router and Tailwind CSS 4. Already have a compatible project? Open a terminal in its root folder.

   New Next.js app

   npx create-next-app@latest my-app
   cd my-app

   For Vite, React Router or Astro, use the framework guides. Install the package in the workspace that renders your interface.

2. 2

   Download the package and install its dependencies.

   Save the real local archive in your application folder. Its manifest declares the runtime dependencies used by the previews.

   Download React package

   npmpnpmyarn

   npm install

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

3. 3

   Connect the shared Helios UI styles.

   Import the stylesheet once from your root layout or client entry. The archive includes the compiled component styles.

   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>;
   }

4. 4

   Review preview access.

   All included examples can be inspected locally. INR plans are previews and checkout is closed. No license key, payment or registry login is needed for the supplied archive.

   View INR plan previews
5. 5

   Use your first component.

   Import the same export used in the preview, or copy editable source with its dependency closure from this checkout.

   Copy component source

   node helios-ui-site/scripts/copy-component.mjs agent-progress --to ./src/components/helios-agent-progress

   Read the generated USAGE.tsx and dependency manifest before integrating. Open the component preview.

6. 6

   Or use a complete template.

   Template source includes its shared components and supporting assets. Copy bundled public assets into the consuming application’s public directory.

   Copy template source

   node helios-ui-site/scripts/copy-component.mjs ai-chat --to ./src/templates/helios-ai-chat

   AI replies and authentication remain local examples until your application supplies its own services.

Seats, CI, and support

Commercial seats and support are proposed features. The local source and build workflow are available now.