Breakpoints

@acronis-platform/ui-react pins the design team's viewport breakpoint scale in three places that are kept in sync: Tailwind's @theme block, a set of --ui-breakpoint-* CSS custom properties, and public JS constants.

Scale

sm/md are Tailwind's own, unoverridden defaults — the design system has no override for them. lg/xl/2xl/3xl/4xl are design-team values, pushed past Tailwind's stock breakpoints for this scale's larger viewport ranges.

Tailwind responsive variants

Because lg–4xl are declared in ui-react's @theme block, the standard Tailwind responsive prefixes apply the design system's values automatically — no config needed for consumers who load @acronis-platform/ui-react/styles:

<div className="flex-col lg:flex-row 2xl:max-w-4xl" />

CSS variables

For sizing an element to match a breakpoint outside a @media/@container conditional (e.g. capping a width), --ui-breakpoint-* custom properties mirror the same lg–4xl values as plain px:

.panel {
  max-width: var(--ui-breakpoint-lg);
}

There are no --ui-breakpoint-sm/-md variables — only the overridden lg–4xl values are exposed.

JS constants

@acronis-platform/ui-react exports the same lg–4xl values as pixel numbers, plus an SSR-safe viewport-width reader:

import { BREAKPOINT_LG, BREAKPOINT_XL, getViewportWidth } from '@acronis-platform/ui-react';

const isWide = (getViewportWidth() ?? 0) >= BREAKPOINT_LG; // 1024

Available constants: BREAKPOINT_LG (1024), BREAKPOINT_XL (1280), BREAKPOINT_2XL (1440), BREAKPOINT_3XL (1680), BREAKPOINT_4XL (1920). getViewportWidth() returns window.innerWidth, or undefined when there is no window (e.g. server-side rendering).