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

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

Установка

Выполните ng add. Команда добавит пакет для Angular вместе с Angular Aria и CDK, которые отвечают за работу с клавиатурой и доступность, и импортирует таблицу стилей в глобальные стили.

ng add @needless-ui/angular

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

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

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

Таблица стилей импортируется один раз в самом начале src/styles.css — именно туда её добавляет ng add. В Sass-файле вместо этого напишите @use '@needless-ui/css';. В неё входят дизайн-токены и все компоненты.

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

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

При работе с Tailwind CSS объявите слой nui после слоя base из Tailwind и перед его утилитами: тогда сброс Tailwind не сможет отменить стили компонентов, а утилитарные классы по-прежнему будут их перекрывать. ng add делает это сам, если находит Tailwind.

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

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

Импортируйте нужные директивы из их точек входа и добавьте их в 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() {}
}

Что дальше

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