Introduction

Onset is a React component library for enterprise applications: tables, charts, forms, overlays, and status displays on a single token system.

BehaviorCopy link

Onset provides React components for forms, tables, charts, navigation, overlays, and status displays. Components read --m-* CSS custom properties supplied by ThemeProvider.

Theme and compositionCopy link

• Theme tokens: Components use --m-* CSS custom properties for colors, spacing, radii, shadows, and typography.
• Layout: Default spacing and typography are sized for data tables and forms.
• Composition: Components accept the HTML attributes and content slots listed in their prop references.
• Status colors: The shared tone scale assigns colors to status indicators, charts, and badges.

Component categoriesCopy link

Onset is organized into categories:

• Actions: Button, IconButton, SplitButton
• Forms & input: Input, Select, Checkbox, DatePicker, FileUpload, TokenField, RuleBuilder
• Data display: Table, DataGrid, TreeView, JsonViewer, Timeline
• Metrics & status: KpiCard, Gauge, ProgressBar, UptimeStrip, StatusDot
• Charts: LineChart, BarChart, DonutChart, Heatmap, FunnelChart, ChoroplethMap
• Navigation: Tabs, Breadcrumb, Sidebar, CommandPalette
• Overlays: Modal, Drawer, Popover, Tooltip, DropdownMenu, ContextMenu
• Feedback: Toast, Banner, Notification, EmptyState, Skeleton

Quick startCopy link

Onset requires a license. Install it from the private registry or included tarball. See Installation. After installing the package:

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

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

Tokens, layout primitives, charts, and overlays are exported from the same package. Read Installation for details.