# Installation

End-to-end setup for @laczynski/ui, from package install to first successful render.

## Prerequisites

- Node.js 18+ (LTS recommended)
- Angular 17+ project (standalone or module-based)
- Package manager: npm

## Install package

### Package install
npm

```ts
npm install @laczynski/ui
```

## Register styles

Add @laczynski/ui styles before your app styles in angular.json.

```ts
"styles": [
  "node_modules/@laczynski/ui/src/lib/scss/main.scss",
  "src/styles.scss"
]
```

## Icon sprite (npm consumers)

ui-icon resolves the SVG sprite at /assets/icons/sprite.svg. The library ships that file under node_modules/@laczynski/ui/assets/icons/; copy it into your app bundle so the URL matches at runtime.

In angular.json, under projects.<your-app>.architect.build.options, merge this entry into the existing assets array (do not replace your other asset rules):

```ts
{
  "glob": "**/*",
  "input": "node_modules/@laczynski/ui/assets/icons",
  "output": "/assets/icons"
}
```

After a production build, you should see sprite.svg under your output folder at assets/icons/sprite.svg. Without this step, icons render empty because the sprite file is not on the server.

## Verify setup

- The app compiles without unknown element errors in templates.
- Base component styles are visible (buttons, inputs, typography).
- Dark and light mode tokens switch correctly if your app supports themes.
- Icons using ui-icon load: /assets/icons/sprite.svg is present in the built output when you install from npm.

If something is missing, start by checking style order and then ensure components are imported in the consuming standalone component.

## Related pages

- LLMs & Markdown endpoints: `/llms.txt`, `/llms-full.txt`, and Markdown variants of docs pages. (/docs/llms)
- Getting Started: Fast path from install to first production-ready feature. (/docs/getting-started)
- Roadmap: Current priorities and upcoming milestones for @laczynski/ui. (/docs/roadmap)