Getting Started

Installation

Install the library alongside React:

pnpm add @acronis-platform/ui-react react react-dom
# or
npm install @acronis-platform/ui-react react react-dom

react and react-dom are peer dependencies (React 18 or 19).

Import the styles

Import the stylesheet once, at your application's entry point. It bundles the Tailwind layer, the base --ui-* tokens from @acronis-platform/tokens-pd, and every component's token tier:

import '@acronis-platform/ui-react/styles';

Fonts

The tokens reference the Inter family but the library does not bundle fonts — you control loading. The self-hosted @fontsource/inter package is the simplest option:

pnpm add @fontsource/inter

import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';

Basic usage

import '@acronis-platform/ui-react/styles';
import { Button, Switch, InputText } from '@acronis-platform/ui-react';

export default function App() {
  return (
    <div>
      <Button variant="default">Save</Button>
      <Switch defaultChecked />
      <InputText placeholder="Your name" />
    </div>
  );
}

Dark mode

Dark mode is built into the tokens via light-dark() + color-scheme. Toggle the active scheme with the data-theme attribute on a root element:

<html data-theme="dark"></html>

Brands

default is the default brand. How you switch depends on when you know the brand.

If you know it at build time, import that brand's semantic tier and the component tier of each component you use — css/<brand>.css on its own is not enough:

import '@acronis-platform/ui-react/styles';
import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css';
import '@acronis-platform/tokens-pd/css/Button/deep_sky_itkontoret.css';
// …one line per component you use

Importing only css/<brand>.css re-themes the shared tokens but leaves every component on the default brand's colors — component token values are baked per brand, so they never re-resolve, and nothing warns you.

If the brand is only known at runtime, load that brand's full bundle after the library styles — one self-contained file covering the shared tokens and every component, so it re-themes all of them at once:

import '@acronis-platform/ui-react/styles';
import '@acronis-platform/tokens-pd/bundles/deep_sky_itkontoret.css';

Keep the ui-react/styles import either way: it carries the library's Tailwind layer, not just tokens.

See Theming for the full model.

TypeScript

Every component is fully typed. Import prop types directly:

import type { ButtonProps } from '@acronis-platform/ui-react';

Next steps

• Browse the Components reference
• Learn about Theming
• Explore the Packages that power the library