weboffice-design

Public React component library for WebOffice Design.

npm package · GitHub repository

Install

# pnpm
pnpm add weboffice-design

# npm
npm install weboffice-design

# yarn
yarn add weboffice-design

Requirements

• React: ^18.0.0 || ^19.0.0
• React DOM: ^18.0.0 || ^19.0.0
• Node.js: 20.9+ for local development or package verification

Quick Start

import 'weboffice-design/css';
import { Button } from 'weboffice-design';

function App() {
  return <Button variant="primary">Hello WebOffice Design</Button>;
}

On-Demand Imports

import 'weboffice-design/style/base';
import 'weboffice-design/button/style';
import { Button } from 'weboffice-design/button';

Use the root CSS entry for the fastest integration. Use the component subpaths when you want finer control over bundle composition and style loading.

Usage

import 'weboffice-design/css';
import { Button } from 'weboffice-design';

Theme And Tokens

The root package also exports theme and token helpers for design-system integration:

import {
  createThemeCss,
  createThemeVars,
  getAlias,
  getComponent,
  getPalette,
  mountFullThemeCss,
  value,
} from 'weboffice-design';

Stable helper subpaths:

• Theme helpers: weboffice-design/theme
• Patterns helpers: weboffice-design/patterns
• Raw SVG assets: weboffice-design/icons/svg/*

Available Component Subpaths

• weboffice-design/button
• weboffice-design/checkbox
• weboffice-design/color-picker
• weboffice-design/color-picker-button
• weboffice-design/color-setting
• weboffice-design/dialog
• weboffice-design/dropdown
• weboffice-design/input
• weboffice-design/input-number
• weboffice-design/linked-number-pair
• weboffice-design/loading
• weboffice-design/mask-layer
• weboffice-design/menu
• weboffice-design/message-bar
• weboffice-design/preset-gallery-select
• weboffice-design/radio
• weboffice-design/radio-group
• weboffice-design/scrollbar
• weboffice-design/search-box
• weboffice-design/select
• weboffice-design/switch
• weboffice-design/tabs
• weboffice-design/toast
• weboffice-design/toolbar-button
• weboffice-design/tooltip

Stable Style Entrypoints

• Whole library styles: weboffice-design/css
• Base styles only: weboffice-design/style/base
• Component styles: weboffice-design/<component>/style

Package Contents

• Prebuilt JavaScript bundles under dist/
• Prebuilt CSS bundles under dist/
• SVG source assets under src/icons/svg/
• No source monorepo tooling or internal CI dependencies

Maintainers

This branch is synchronized from the source monorepo by CI and only contains the files required for public package distribution.

To publish a new npm version from GitHub:

1. Sync the latest release contents to this repository branch.
2. Ensure the package version in package.json is the version you want to release.
3. Run the Publish Package workflow from GitHub Actions.
4. Configure npm Trusted Publisher to point at publish.yml in .github/workflows/.

License

MIT