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. Layer another brand by importing its override stylesheet after the base styles (last import wins):

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

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
Migrating from legacy shadcn-uikit? See the migration guide

Edit on GitHub

Getting Started

On this page