open-index/open-npm huggingface dataset:
npm package: @ngrr/ds
Description: AI-first React component library built at Nagarro.
Latest version: 0.1.35

# DS-Nagarro (`@ngrr/ds`)

AI-first React component library built at Nagarro.

---

## For AI agents

Read `node_modules/@ngrr/ds/AI.md` before writing any code. That file is the single source of truth for using this design system — layout rules, tokens, components, patterns, and what not to do.

**Cursor / Claude Code** — add this to `.cursorrules` so it loads automatically:
```
Read node_modules/@ngrr/ds/AI.md before writing any code.
```

**Other tools** — if your tool has a context limit, use `node_modules/@ngrr/ds/AI-short.md` instead.

---

## Install
```bash
npm install @ngrr/ds --legacy-peer-deps
```

### Required imports
```tsx
// main.tsx — add before everything else
import '@ngrr/ds/style.css'
import '@ngrr/ds/tokens.css'
```
```css
/* index.css */
html, body { margin: 0; height: 100%; }
#root { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
```

---

## Resources

| | |
|---|---|
| **Using components** | `node_modules/@ngrr/ds/AI.md` (installed) · `AI.md` (source repo) — rules for AI agents consuming this library in a project |
| **Using components (short)** | `node_modules/@ngrr/ds/AI-short.md` — same rules, condensed for tools with context limits |
| **Building components** | `AGENTS.md` (source repo) — rules for AI agents adding or modifying components inside the library itself. Do not read this if you are consuming the package. |
**Storybook** | [Live component docs](https://699f3dfd3540c3f346868d55-kmskdmltrn.chromatic.com/) |

---

## Stack

React 18+ · TypeScript · Styled Components v6 · Vite