@docspace/ui-kit

React UI component library extracted from the ONLYOFFICE DocSpace client codebase.

About This Library

@docspace/ui-kit provides React components and a color system extracted from the DocSpace-client monorepo (libs/ui-kit).

Note: This library is currently in early development (v0.0.1). The API may change before a stable release.

Features ✨

• TypeScript-first - Full type definitions included out of the box
• Color system - Built-in globalColors palette with named color tokens for light and dark UI states
• Interactive docs - Every component is documented with Storybook stories and controls
• Tree-shakeable - Ships both ESM and CJS builds; import only what you use
• Well-tested - Components are tested with Vitest and React Testing Library
• Modern tooling - Built with Rollup, linted and formatted with Biome

Installation

# pnpm
pnpm add @docspace/ui-kit

# npm
npm install @docspace/ui-kit

# yarn
yarn add @docspace/ui-kit

Peer dependencies: react and react-dom ≥ 18.0.0

Quick Start

Using a Component

import { Text } from "@docspace/ui-kit";

function App() {
  return (
    <Text fontSize="14px" isBold>
      Hello World
    </Text>
  );
}

Using the Color Palette

import { globalColors } from "@docspace/ui-kit/themes/globalColors";

const primaryBlue = globalColors.lightBlueMain;
const errorRed = globalColors.mainRed;

Components

Component	Description	Docs
Text	Flexible, customizable text rendering with typography control	README

Theming

The library ships with globalColors - 100+ named color tokens. It can be imported directly or via the themes entry point:

import { globalColors } from "@docspace/ui-kit/themes/globalColors";
// or
import { globalColors } from "@docspace/ui-kit/themes";

// Base
const white = globalColors.white; // "#ffffff"
const black = globalColors.black; // "#333333"

const primary = globalColors.lightBlueMain;
const success = globalColors.mainGreen;
const error = globalColors.mainRed;
const warning = globalColors.mainOrange;

Development

Clone this repository or work within the DocSpace-client monorepo and run:

Storybook - interactive component explorer

pnpm storybook

Opens at http://localhost:6006 - browse components, tweak props with the controls panel, and see live previews.

Tests

pnpm test           # run all tests once
pnpm test:watch     # watch mode
pnpm test:coverage  # with coverage report
pnpm test:ui        # Vitest UI dashboard

Build

pnpm build          # production build (ESM + CJS + type declarations)
pnpm build:watch    # rebuild on file changes

Lint & Format

pnpm lint           # check for lint issues
pnpm lint:fix       # auto-fix lint issues
pnpm format         # check lint and formatting
pnpm format:fix     # auto-fix lint and formatting

Useful Links

Resource	URL
🌐 ONLYOFFICE Website	onlyoffice.com
🐙 DocSpace-client Monorepo	github.com/ONLYOFFICE/DocSpace-client
📖 ONLYOFFICE API	api.onlyoffice.com
💬 Community Forum	community.onlyoffice.com
🆘 Help Center	helpcenter.onlyoffice.com
📣 Feedback	feedback.onlyoffice.com

Contributing

Issues and feature requests are tracked in the DocSpace-client repository. Contributions are welcome - please open an issue or PR there, or start a discussion on the community forum.

License

This library is distributed under the GNU AGPL v3 license. See the source files for the full license text.