Developer quick start UX4G 3.0.18

Start building with UX4G Design System

Add production-ready components using familiar HTML classes. Select your environment and follow a focused setup path.

Class-based markup Auto-bootstrap runtime Accessible defaults

Add UX4G directly to a page with no build tools or package manager. Place the stylesheet in the document head and the scripts before the closing body tag.

Add the CDN files

index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My UX4G Page</title>

  <!-- UX4G CSS -->
  <link rel="stylesheet" href="https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css" />
</head>
<body>
  <!-- UX4G JS (theme toggle, accessibility bar, etc.) -->
  <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js"></script>
  <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js"></script>

  <button class="ux4g-btn-primary ux4g-btn-md" type="button">
    Get Started
  </button>
</body>
</html>

Copy individual URLs

CSS https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css

JavaScript runtime https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js

Custom components https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js

Use the core web package in React and apply UX4G classes directly to JSX elements.

Install the package

Terminal

npm install ux4g-web-components

Load styles and runtime

src/main.jsx or src/index.jsx

TypeScript

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

Use UX4G classes

src/App.jsx

TSX

function App() {
  return (
    <button
      className="ux4g-btn ux4g-btn-primary ux4g-btn-md"
      type="button"
      onClick={() => console.log('Saved!')}
    >
      Save
    </button>
  );
}

Install the core web package, then choose either Angular configuration or direct imports to load UX4G.

Install the package

Terminal

npm install ux4g-web-components

Method A: Configure angular.json

Recommended. Add the stylesheet and auto-bootstrap runtime to the project options. No TypeScript runtime import is needed.

angular.json

{
  "styles": [
    "node_modules/ux4g-web-components/styles/ux4g.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/ux4g-web-components/dist/runtime/design-system.js"
  ]
}

Method B: Import styles and runtime

src/styles.css

CSS

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

src/main.ts

TypeScript

import 'ux4g-web-components/design-system';

Increase the bundle budget

The stylesheet includes design tokens, components, fonts, and assets. Increase the production initial bundle budget to prevent warnings or build blocks.

angular.json

{
  "type": "initial",
  "maximumWarning": "10MB",
  "maximumError": "12MB"
}

Developer quick start UX4G 3.0.18

Start building with UX4G Design System

Add production-ready components using familiar HTML classes. Select your environment and follow a focused setup path.

code Class-based markup bolt Auto-bootstrap runtime verified_user Accessible defaults

Add UX4G directly to a page with no build tools or package manager. Place the stylesheet in the document head and the scripts before the closing body tag.

Add the CDN files

index.html

                  <!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My UX4G Page</title> <!-- UX4G CSS --> <link rel="stylesheet" href="https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css" /> </head> <body> <!-- UX4G JS (theme toggle, accessibility bar, etc.) --> <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js"></script> <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js"></script> <button className="ux4g-btn-primary ux4g-btn-md" type="button"> Get Started </button> </body> </html>

Copy individual URLs

CSS https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css

JavaScript runtime https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js

Custom components https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js

Use the core web package in React and apply UX4G classes directly to JSX elements.

Install the package

Terminal

                  npm install ux4g-web-components

Load styles and runtime

src/main.jsx or src/index.jsx

TypeScript

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

Use UX4G classes

src/App.jsx

TSX

                  function App() { return ( <button className="ux4g-btn ux4g-btn-primary ux4g-btn-md" type="button" onClick={() => console.log('Saved!')} > Save </button> ); }

Install the core web package, then choose either Angular configuration or direct imports to load UX4G.

Install the package

Terminal

                  npm install ux4g-web-components

Method A: Configure angular.json

i Recommended. Add the stylesheet and auto-bootstrap runtime to the project options. No TypeScript runtime import is needed.

angular.json

                  { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] }

Method B: Import styles and runtime

src/styles.css

CSS

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

src/main.ts

TypeScript

                  import 'ux4g-web-components/design-system';

Increase the bundle budget

i The stylesheet includes design tokens, components, fonts, and assets. Increase the production initial bundle budget to prevent warnings or build blocks.

angular.json

                  { "type": "initial", "maximumWarning": "10MB", "maximumError": "12MB" }

Developer quick start UX4G 3.0.18

Start building with UX4G Design System

Add production-ready components using familiar HTML classes. Select your environment and follow a focused setup path.

Class-based markup Auto-bootstrap runtime Accessible defaults

Add UX4G directly to a page with no build tools or package manager. Place the stylesheet in the document head and the scripts before the closing body tag.

Add the CDN files

index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My UX4G Page</title>

  <!-- UX4G CSS -->
  <link rel="stylesheet" href="https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css" />
</head>
<body>
  <!-- UX4G JS (theme toggle, accessibility bar, etc.) -->
  <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js"></script>
  <script src="https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js"></script>

  <button class="ux4g-btn-primary ux4g-btn-md" type="button">
    Get Started
  </button>
</body>
</html>

Copy individual URLs

CSS https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css

JavaScript runtime https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js

Custom components https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js

Use the core web package in React and apply UX4G classes directly to JSX elements.

Install the package

Terminal

npm install ux4g-web-components

Load styles and runtime

src/main.jsx or src/index.jsx

TypeScript

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

Use UX4G classes

src/App.jsx

TSX

function App() {
  return (
    <button
      className="ux4g-btn ux4g-btn-primary ux4g-btn-md"
      type="button"
      onClick={() => console.log('Saved!')}
    >
      Save
    </button>
  );
}

Install the core web package, then choose either Angular configuration or direct imports to load UX4G.

Install the package

Terminal

npm install ux4g-web-components

Method A: Configure angular.json

Recommended. Add the stylesheet and auto-bootstrap runtime to the project options. No TypeScript runtime import is needed.

angular.json

{
  "styles": [
    "node_modules/ux4g-web-components/styles/ux4g.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/ux4g-web-components/dist/runtime/design-system.js"
  ]
}

Method B: Import styles and runtime

src/styles.css

CSS

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

src/main.ts

TypeScript

import 'ux4g-web-components/design-system';

Increase the bundle budget

The stylesheet includes design tokens, components, fonts, and assets. Increase the production initial bundle budget to prevent warnings or build blocks.

angular.json

{
  "type": "initial",
  "maximumWarning": "10MB",
  "maximumError": "12MB"
}