Installation

Install from the private registry or the tarball, import the stylesheet, and wrap your tree in ThemeProvider.

RequirementsCopy link

Onset supports React 18 and React 19 as peer dependencies. It uses useId, automatic batching, and concurrent features internally.

• react and react-dom: ^18.0.0 || ^19.0.0, peer dependencies. You provide these; Onset does not bundle React.
• Onset's internal default icons are bundled, so the library has no icon-package runtime dependency. Many examples use @tabler/icons-react for icons supplied by application code; add it to your own dependencies if you copy those imports, or substitute your preferred icon package.

The package ships ES modules, a single pre-compiled stylesheet, and TypeScript declarations. There is no build step, no CSS-in-JS runtime, and no PostCSS or Tailwind configuration to add.

Package contentsCopy link

An Onset license includes registry access, a versioned tarball, and source code. Purchase a license at solarius.me/product/onset. See the License for usage terms.

• Private registry: credentials for installing @solarius/onset from registry.solarius.me.
• Tarball: a versioned package for offline builds or repository vendoring.
• Source code: reference code for debugging and API inspection. See Coding with agents.

Install from the private registryCopy link

The default installation method: upgrades are a version bump rather than a file swap.

Route the scope in a committed .npmrc. Scope routing is not a secret:

@solarius:registry=https://registry.solarius.me

Keep the token out of the repository. Put it in your user-level ~/.npmrc, and inject it from a secret in CI:

//registry.solarius.me/:_authToken=${SOLARIUS_TOKEN}

To install with pnpm, run:

pnpm add @solarius/onset

To install with npm, run:

npm install @solarius/onset

Install from the tarballCopy link

For offline builds or a pinned local artifact, store the tarball in the repository, such as in a vendor/ directory beside package.json. Install it by path:

For pnpm, run:

pnpm add ./vendor/solarius-onset-0.2.0.tgz

For npm, run:

npm install ./vendor/solarius-onset-0.2.0.tgz

For Yarn, run:

yarn add ./vendor/solarius-onset-0.2.0.tgz

Replace solarius-onset-0.2.0.tgz with the downloaded archive's file name.

Any of these rewrites your package.json to point at the file for a reproducible install:

{
  "dependencies": {
    "@solarius/onset": "file:vendor/solarius-onset-0.2.0.tgz"
  }
}

Upgrade a tarball dependencyCopy link

A file: dependency pins the specified archive. To upgrade, add the new tarball, run the installation command with its path, and remove the old tarball after updating references.

Source codeCopy link

The license includes source code for reference. Install the prebuilt package for runtime use. The source supports:

• Inspecting implementation behavior.
• Debugging component code.
• Providing API definitions to a coding agent. See Coding with agents.

ThemeProviderCopy link

Onset requires two imports. Without both, nothing is styled:

• @solarius/onset/styles.css: the compiled component stylesheet
• <ThemeProvider>: the React context that resolves design tokens into --m-* CSS custom properties

ThemeProvider takes two key props:

• defaultBaseColor: a hex color that drives the entire palette. Pass any color; accent and neutral scales are generated from it.
• defaultMode: "light" or "dark". Defaults to "dark" with a purple accent.

Minimal setupCopy link

Import the stylesheet and wrap your components in the provider:

import "@solarius/onset/styles.css";
import { ThemeProvider, Button } from "@solarius/onset";

export default function App() {
  return (
    <ThemeProvider defaultBaseColor="#6c5ce7" defaultMode="dark">
      <Button variant="primary">Save</Button>
    </ThemeProvider>
  );
}

TypeScriptCopy link

Every component has typed props with inline doc comments. Your editor's IntelliSense shows descriptions, defaults, and required fields as you type. No additional type packages are needed: declarations ship inside the tarball.