Components

The @acronis-platform/ui-react library ships a set of accessible React components built on Base UI primitives and themed entirely by generated design tokens. Every component is fully typed and tree-shakeable.

Importing

All public components are imported from the package root, and the stylesheet is imported once at your app entry point:

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

The styles import pulls in the --ui-* custom properties from @acronis-platform/tokens-pd and the Tailwind bridge that maps them onto the components. Without it, components render unstyled.

How the components work

• Base UI under the hood — keyboard navigation, focus management, and ARIA come from @base-ui/react. Components that render a single element expose a render prop (Base UI's useRender) for polymorphism instead of asChild.
• Token-driven theming — colors and metrics resolve to --ui-* tokens generated from the design system; light/dark via light-dark(), brands via the [data-theme] attribute. Nothing is hard-coded.
• Tree-shakeable — import only what you use; unused components are dropped by the bundler.

Browse