Overview
Install the package, import the tokens, and start using components.
Install
pnpm add @onersoft/design-systemPeer dependencies:
| Peer | Version | Notes |
|---|---|---|
react | ^19 | required |
react-dom | ^19 | required |
react-hook-form | ^7.74 | optional — only if you use Form |
Import a component
Every component is a named export. Importing from the package barrel automatically pulls in the token CSS — no separate stylesheet import is required.
import { Button, Dialog, toast } from '@onersoft/design-system';The package declares sideEffects: ["**/*.css"], so bundlers (Next.js, Vite, Webpack) preserve those CSS imports while still tree-shaking unused JS.
Token CSS only
If you import individual component entry points (@onersoft/design-system/Button) instead of the barrel, or if you need tokens in a CSS-only context (SSR layout, MDX, an external page), import the token layer directly:
import '@onersoft/design-system/tokens.css';This file contains all --ds-* tokens plus the :root[data-theme='light'] branch.
Theming
The design system does not ship a ThemeProvider. Tokens branch on a data-theme attribute that the host app is responsible for writing on <html>. See Theming for the recommended setup with next-themes.
Toaster (optional)
To use the imperative toast() API, mount <Toaster /> once near the root.
import { Toaster, toast } from '@onersoft/design-system';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<>
{children}
<Toaster />
</>
);
}
// anywhere in the tree
toast.success('Saved');