@freightos/freightwind

FreightWind Design System — React UI components for Freightos applications.

Installation

npm install @freightos/freightwind @freightos/freightwind/icons

Usage

import { Button, Alert, Badge } from '@freightos/freightwind';
import '@freightos/freightwind/tokens.css';

Components require Tailwind CSS v4 with the FDS design tokens loaded via tokens.css.

Host isolation (WebCargo)

When mounting FreightWind inside the WebCargo host, also import the WebCargo isolation sheet and wrap your App in a .fw-root element:

import '@freightos/freightwind/tokens.css';
import '@freightos/freightwind/host-isolation/webcargo.css';

<div className="fw-root">
  <App />
</div>

The sheet ports Tailwind's standard Preflight scoped to .fw-root via :where() (zero added specificity), plus a focus-bleed cancellation keyed on the .fw-base per-element marker so it covers FW components rendered inside Radix portals (Dialog / Popover / Tooltip / DropdownMenu / Select). It exists solely to neutralize WebCargo's Bootstrap-style host CSS that targets bare element selectors (h1-h6 { margin-bottom: .5rem }, button { border-radius: 0 }, button:focus { outline: 5px auto … }, …) — it does NOT impose FW-specific styling, so it never drifts from FW design tokens.

Skip this file when consuming FreightWind in a clean host (Vite playground, greenfield Next.js apps, partner sites without Bootstrap) — there is no host CSS to fight there.

Peer Dependencies

• react >= 18
• react-dom >= 18
• @freightos/freightwind/icons >= 1.0.0

License

MIT