# Getting Started

Build a production-ready @laczynski/ui flow in minutes. This guide gives you the fastest path from installation to your first shipped screen.

## Who this guide is for

- Teams building an internal design system on top of Angular components
- Projects that need consistent Fluent 2 styling and accessibility defaults
- Developers who want fast setup without giving up TypeScript safety

## 30-minute setup path

### Install the package
Step 1

Add ui to your workspace with your package manager of choice.

```ts
npm install ui
```

### Register base styles
Step 2

Include library styles once in angular.json so every component gets consistent tokens.

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

### Import only what you use
Step 3

Use standalone imports in your feature component to keep bundles lean and code explicit.

```ts
import { ButtonComponent } from 'ui';

@Component({
  selector: 'app-example',
  imports: [ButtonComponent],
  template: '<ui-button variant="primary">Save changes</ui-button>'
})
export class ExampleComponent {}
```

### Set up theming
Step 4

Start with default light/dark support, then override CSS variables in your app styles.

## First production feature checklist

Use this as a minimum quality gate before merging your first screen to main.

- Define one source of truth for colors and spacing tokens.
- Add form validation states (default, error, disabled, loading).
- Test keyboard navigation and focus states before release.
- Document your internal usage pattern in one page for the team.

## Related pages

- LLMs & Markdown endpoints: `/llms.txt`, `/llms-full.txt`, and Markdown variants of docs pages. (/docs/llms)
- Installation: Environment requirements and setup checklist for your project. (/docs/installation)
- Roadmap: Current priorities and upcoming milestones for @laczynski/ui. (/docs/roadmap)