# UX4G Quick Start

Step-by-step quick start guide for consuming UX4G in HTML via CDN, React via npm, and Angular via angular.json configuration. Includes code snippets for each framework and copy-ready installation commands.

## Quick start

### HTML / CDN
```html
<link rel="stylesheet" href="https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css" />
<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>
```

### React
```bash
npm install ux4g-web-components
```
```jsx
import 'ux4g-web-components/styles.css';
import 'ux4g-web-components/design-system';
```

### Angular
In `src/styles.css`:
```css
@import 'ux4g-web-components/styles.css';
```
In `src/main.ts`:
```ts
import 'ux4g-web-components/design-system';
```

## Package contract

- `ux4g-web-components/styles.css`: complete CSS bundle.
- `ux4g-web-components/design-system`: side-effect runtime import for documented interactive behaviours.
- The package does not export named React, Angular, Vue, or Web Component UI elements. Use standard HTML elements with verified `ux4g-*` classes.
- Framework syntax conversion is documented once at https://doc.ux4g.gov.in/web/llms/framework-syntax.md; component pages use canonical HTML instead of duplicating framework examples.
- Do not import undocumented package subpaths or reference files through `node_modules`.

## Explore

- [Tokens](tokens.md)
- [Utilities](utilities.md)
- [Layout](layout.md)
- [Components](components.md)
- [Patterns](patterns.md)

## Theme setup required

Before creating UI, ask for approved primary, secondary, tertiary, neutral, success, warning, error, and info colours, plus light/dark-mode requirements. Put approved overrides in the application global stylesheet, not in the UX4G package.

```css
:root {
  /* Replace only with approved project values. */
  --ux4g-color-primary-500: #6a4eff;
  --ux4g-color-secondary-500: #c47d00;
  --ux4g-color-tertiary-500: #a66acc;
}

[data-theme="dark"] {
  /* Add approved dark-theme semantic token overrides here. */
}
```