# @oxygen-ui/primitives

> Low level building blocks of the Oxygen Design System

Latest version **2.4.6** (published 2025-07-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @oxygen-ui/primitives
pnpm add @oxygen-ui/primitives
yarn add @oxygen-ui/primitives
bun add @oxygen-ui/primitives
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.6 |
| Published | 2025-07-24 |
| First published | 2023-03-31 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 835.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | WSO2 |
| Maintainers | wso2-org |
| Keywords | primitives, design-tokens, tokens, design-system, oxygen-ui, oxygen-ui-primitives |

## Links

- npm: https://www.npmjs.com/package/@oxygen-ui/primitives
- Repository: https://github.com/wso2/oxygen
- Homepage: https://github.com/wso2/oxygen-ui/tree/main/packages/primitives#readme
- Issues: https://github.com/wso2/oxygen/issues
- npm.io page: https://npm.io/package/@oxygen-ui/primitives

## Recent versions

- 2.4.6 (latest) — 2025-07-24
- 2.4.5 — 2025-06-13
- 2.4.4 — 2025-06-10
- 2.4.3 — 2025-06-04
- 2.4.2 — 2025-05-27
- 2.4.1 — 2025-05-19
- 2.4.0 — 2025-05-15
- 2.3.4 — 2025-02-07
- 2.3.3 — 2025-02-07
- 2.3.2 — 2025-02-06
- 2.3.1 — 2025-01-17
- 2.3.0 — 2025-01-16
- 2.2.0 — 2025-01-10
- 2.1.0 — 2025-01-06
- 2.0.0 — 2024-11-06
- … 67 more at https://npm.io/package/@oxygen-ui/primitives/versions

## README

<p align="center" style="color: #343a40">
  <h1 align="center">@oxygen-ui/primitives</h1>
</p>
<p align="center" style="font-size: 1.2rem;">Contains common design primitives such as design tokens, fonts, and icons for Oxygen UI.</p>

<div align="center">
  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@oxygen-ui/primitives">
  <img alt="npm" src="https://img.shields.io/npm/dw/@oxygen-ui/primitives">
  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
</div>

## Installation

To install `@oxygen-ui/primitives`, run the following command:

```sh
# With npm
npm install @oxygen-ui/primitives

# With pnpm
pnpm add @oxygen-ui/primitives

# With yarn
yarn add @oxygen-ui/primitives
```

## Usage

Here's an example of how to use the `@oxygen-ui/primitives` package:

### Design Tokens

You can import the design tokens by referencing the `@oxygen-ui/primitives/dist/design-tokens` directory. For example:

```js
import tokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/tokens';

export const Theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: tokens.OxygenColorsPrimaryDefault,
        },
      },
    }
  }
}
```

### Icons

To use the icons, you can import the generated JSON data from `@oxygen-ui/primitives/dist/icons/data.json`. For example:

```js
const oxygenIcons = require('@oxygen-ui/primitives/dist/icons/data.json');
```

> **Note**
> These icons are exported in a low level agnostic manner and are not meant to be used directly in your application.
> Instead, you should use the framework specific wrappers such as `@oxygen-ui/react-icons`.
> New libraries like `@oxygen-ui/vue-icons` or `@oxygen-ui/icon-font` could be written in the future by using the exported JSON data.

### API
`@oxygen-ui/primitives` does not export any APIs as of now, but instead provides a set of low level components for use in Oxygen UI.

## Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our [guidelines for contributing](../../CONTRIBUTING.md) to get started.

## License

Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.

---
_Source: https://npm.io/package/@oxygen-ui/primitives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._