Начало работы

Needless UI работает с Angular 22. Компоненты — это standalone-директивы, поэтому импортировать модули не нужно.

Установка

Добавьте пакет для Angular вместе с Angular Aria и CDK: они отвечают за работу с клавиатурой и доступность. Таблица стилей входит в комплект.

pnpm add @needless-ui/angular @angular/aria @angular/cdk

Импорт стилей

Импортируйте таблицу стилей один раз в src/styles.css. В неё входят дизайн-токены и все компоненты.

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

Все стили находятся внутри @layer nui. Если в приложении есть глобальные сбросы вроде a { color: inherit }, поместите их в слой, объявленный до nui, чтобы они не переопределяли компоненты.

Использование компонента

Импортируйте нужные директивы из их точек входа и добавьте их в imports своего компонента.

import { Component } from '@angular/core';
import { NuiButton } from '@needless-ui/angular/button';

@Component({
  selector: 'app-root',
  imports: [NuiButton],
  template: `<button nuiButton (click)="save()">Save changes</button>`,
})
export class App {
  save() {}
}

Что дальше

Изучите компоненты с живыми примерами или прочитайте руководство по темизации, чтобы подстроить оформление под свой бренд.