Installation

UX4G ships as a single web package with support for React, Angular, and plain HTML / Web Components. Install once, then apply ux4g-* classes to native markup.

Works with React 17+ and the Next.js app router. Import the styles and runtime once in your entry file, then use ux4g-* classes on native JSX elements.

1Install the package

$ npm install ux4g-web-components

2Load styles, runtime, and use a component

App.tsx

import 'ux4g-web-components/styles.css';
import 'ux4g-web-components/design-system';

export default function App() {
  return (
    <button className="ux4g-btn ux4g-btn-primary ux4g-btn-md" type="button">
      Apply now
    </button>
  );
}

UX4G ships one core web package — there are no separate per-framework component imports. The runtime detects ux4g-* classes in the DOM and wires up interactive behaviour automatically, so the same markup works everywhere.

Read the full installation guide

Design tokens

Tokens are named design decisions exposed as CSS custom properties in the package. They map directly to every UX4G component and can be used independently in custom layouts.

Color

Brand, status, and neutral values used across all components.

--ux4g-color-primary-600

Aaअ

Typography

Font families, sizes, weights, and line-heights for every text role.

--ux4g-font-display-lg

Spacing

Margin and padding scale on a 4px grid, used throughout layout.

--ux4g-space-4

Shadows

Elevation levels from subtle card shadow to full modal overlay.

--ux4g-shadow-md

Border radius

Corner-radius values from sharp 0px through to fully rounded.

--ux4g-radius-lg

Import the token stylesheet

styles.css

@import 'ux4g-web-components/styles.css';

For the full token reference — every scale, every value — see Foundations →

Accessibility baseline

WCAG 2.1 AA is the minimum for every UX4G implementation.

Color contrast

Verify in context, not just at component level. Status colours especially must be checked against their real background.

Keyboard navigation

Every interactive component must be fully operable by keyboard. Never suppress focus styles.

Read the full accessibility guidelines

Developer resources

Full component documentation, framework docs, and live examples.

Web Core Docs

Docs

HTML, React, and Angular documentation for the web component library.

Open

Flutter Core Docs

Docs

Flutter/Dart package documentation and implementation guides.

Open

Build with AI

AI

Scaffold UX4G screens and components with AI assistance.

Explore

Mapping with Classes

Mapping

Cross-framework utility and component mapping between UX4G, Bootstrap, and Tailwind.