Acronis UI Kit

A pnpm monorepo for the Acronis design system: a React component library, a design-token pipeline (Figma → JSON → CSS/Tailwind), icon packages, design-data packages, and supporting apps and tooling.

Architecture in brief: @acronis-platform/ui-react is built on Base UI unstyled primitives and themed by @acronis-platform/tokens-pd (--ui-* CSS custom properties generated from @acronis-platform/design-tokens). Tailwind CSS is used internally to compile styles — consumers receive fully pre-built CSS and can use any styling solution in their own project. No Tailwind installation required.

📦 Workspaces

The repo is organized into four top-level directories: context/ (shared docs), apps/ (deployed apps, private), packages/ (published libraries + data), and tools/ (private build tooling).

Path	Package	Published	Role
packages/ui-react/	@acronis-platform/ui-react	yes	The React component library, built on Base UI, themed by tokens-pd.
packages/icons-react/	@acronis-platform/icons-react	yes	React icon components generated from design-assets (tree-shakeable).
packages/design-tokens/	@acronis-platform/design-tokens	yes	DTCG-2025.10 design tokens (primitives / semantics / components). Data only.
packages/design-assets/	@acronis-platform/design-assets	yes	Icon/illustration manifests + bundled binaries. Data only.
packages/tokens-pd/	@acronis-platform/tokens-pd	yes	Generated per-brand CSS vars, per-component CSS, Tailwind presets, DTCG.
apps/docs/	@acronis-platform/uikit-docs	no	Next.js 15 + Fumadocs documentation site.
tools/style-dictionary/	@acronis-platform/style-dictionary	no	Style Dictionary v5 build: design-tokens → tokens-pd CSS/presets.
tools/figma-design-assets-sync/	@acronis-platform/figma-design-assets-sync	no	Syncs icon SVGs from Figma into design-assets and regenerates the pack.

This table covers the workspaces relevant to consuming the kit. It omits the ui-spec spike. See AGENTS.md for the full workspace map and the per-workspace AGENTS.md files for area-specific conventions.

@acronis-platform/shadcn-uikit (ui-legacy) has been removed from this repository. It is superseded by @acronis-platform/ui-react. Previously published versions (up to 0.36.3) remain installable from npm and are deprecated there; the final source is in this repo's history at commit 2e257c95 (also tagged ui-legacy-final).

🚀 Getting Started

Prerequisites

• Node.js 22.x (see .nvmrc; CI builds on Node 22)
• pnpm 10.27.0 — pinned via the root packageManager field, so corepack enable picks up the right version automatically

Installation (development)

# Clone the repository
git clone https://github.com/acronis/uikit.git
cd uikit

# Install dependencies
pnpm install

# Build all packages
pnpm run build

Exploring Components

• Storybook — every component, all variants, light + dark.
• Documentation site — usage guides, API references, and patterns (Next.js + Fumadocs, apps/docs).

Run either locally instead:

# Storybook for @acronis-platform/ui-react
pnpm --filter @acronis-platform/ui-react storybook

# Documentation site (apps/docs)
pnpm --filter @acronis-platform/uikit-docs dev

📖 Usage (@acronis-platform/ui-react)

Installation

pnpm add @acronis-platform/ui-react react react-dom

react and react-dom (^18.2.0 || ^19.0.0) are peer dependencies. The theme layer (@acronis-platform/tokens-pd) and icons (@acronis-platform/icons-react) ship as direct dependencies, so no extra install is needed.

Import Styles

Import the pre-built stylesheet once at your application entry point. It bundles the --ui-* token layer and all component CSS — no Tailwind installation required:

// main.tsx or App.tsx
import '@acronis-platform/ui-react/styles';

Using Components

All components are exported from the package root:

import {
  Button,
  Card,
  CardHeader,
  CardContent,
  CardFooter,
  Input,
  Label,
  Badge,
  Alert,
  AlertTitle,
  AlertDescription,
} from '@acronis-platform/ui-react';

function MyComponent() {
  return (
    <Card>
      <CardHeader title="Welcome" />
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <Alert>
          <AlertTitle>Info</AlertTitle>
          <AlertDescription>This is an informational message.</AlertDescription>
        </Alert>
      </CardContent>
      <CardFooter>
        <Button>Submit</Button>
        <Badge variant="secondary">New</Badge>
      </CardFooter>
    </Card>
  );
}

Aliases: Input/Search/Textarea are aliases of the full-field components InputText/InputSearch/InputTextArea, and Badge is an alias of the design-system-native Tag.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗