<p align="center">
  <img src="public/navaigator-logo.png" alt="NavAIgator" width="512" />
</p>

<h1 align="center">NavAIgator</h1>

<p align="center"><em>An alligator. A robot. A design system. What could go wrong?</em></p>

> Experiment: a shadcn-style UI library skinned with the DFDS Navigator Design System.

NavAIgator installs shadcn primitives and wraps them in a thin compatibility bridge so they render with DFDS Navigator tokens out of the box. The library components live under `src/components/navaigator/` and are showcased in Storybook.

## Stack

- Vite + React 19 + TypeScript
- Tailwind CSS v4 (via `@tailwindcss/vite`, no config file — tokens live in `src/index.css`)
- shadcn/ui components (new-york style), installed into `src/components/ui/`
- [`@dfds-frontend/navigator-styles`](https://www.npmjs.com/package/@dfds-frontend/navigator-styles) for the Navigator design tokens, fonts, and `cn` helper
- Storybook 9 with `@storybook/react-vite` as the component explorer

## Getting started

```bash
pnpm install
pnpm storybook   # primary dev surface at http://localhost:6006
pnpm dev         # minimal Vite landing at http://localhost:5173
pnpm build       # typecheck + production bundle
```

## Adding a shadcn primitive

```bash
pnpm dlx shadcn@latest add <component> --yes
```

Components land in `src/components/ui/`. Do not hand-edit them — wrap them inside `src/components/navaigator/` instead.

## Figma source

The design system lives at [Figma › Navigator Design System](https://www.figma.com/design/9xpqZr1GVjGoOum6kUjLAd/Navigator-Design-System). The Figma MCP server can pull component specs; see `CLAUDE.md` for the workflow.


