Onset
Solarius interface system. Installation, theming, component props, hooks, and usage examples for the Onset React library.
Getting started
Topics
Onset documentation covers installation, theming, components, hooks, and examples
for @solarius/onset. React and a build tool are required.
Start with Installation, or use the
component index for API lookup. A commercial license
includes source code for reference. Installed TypeScript declarations are in
dist/index.d.ts. See Coding with agents for agent setup.
Choose by task
Use the task table to find setup instructions and prerequisites.
| Task | Start with | Assumes |
|---|---|---|
| Add Onset to an application | Installation | A license, and registry credentials or the tarball |
| Wire it into Next, Vite, or Remix | Frameworks | Onset installed |
| Match the palette to a product | Theming | ThemeProvider above the components |
| Find the component a screen needs | Components | Nothing |
| Style your own markup to match | Tokens | A ThemeProvider writing the variables you read |
| Write a component that matches the built-ins | Building components | Box & layout and Surface & Panel |
| Render Markdown or CMS output | Prose | A renderer that emits HTML or React elements |
| Send transactional mail | A server-side render step | |
| Server-render without a hydration mismatch | Server rendering | A framework that renders on the server |
| Point a coding agent at Onset | Coding with agents | The source readable where the agent runs |
| Check what you may do with the source | License | Nothing |
If components render without styles, check that @solarius/onset/styles.css is
imported and ThemeProvider contains the components. Custom portals must use the
container from usePortalContainer to
inherit theme variables.
Install and integrate
Theme the library
Compose screens
Look up a component or hook
Component pages contain props tables, examples, and applicable comparisons.
Press / to filter navigation or ⌘K to search documentation.
- All components
- All hooks
- Charts gallery: every chart on one page
Component categories
- Actions
- Forms & Input
- Form Structure
- Data Display
- Metrics & Status
- Charts
- Navigation & Chrome
- Overlays
- Auth
- Feedback
- Tiling
- Containers
- Time & Keyboard
- Rule Builder
Reader conventions
Code examples show the part under discussion and not the application around it:
the stylesheet import and the ThemeProvider wrapper from
Installation are assumed everywhere and repeated
nowhere. Props tables list what Onset adds, and where a component forwards a DOM
element's attributes, its page names the element. Tokens appear as the CSS custom
property when you would write them in a stylesheet (--m-color-fg) and as the
exported constant when you would import them from @solarius/onset/tokens.
Previews are the real components rather than screenshots, and each one can show
the source that produced it.