Needless UI

Open source · Angular 22 · MIT

UI-компоненты, сделанные тщательнее, чем нужно.

Needless UI стилизует нативные элементы с помощью одной таблицы стилей, не зависящей от фреймворка, и дизайн-токенов W3C. Директивы Angular добавляют поведение из Angular Aria, так что доступность каждого компонента обеспечена с первого же рендера.

Начать Посмотреть компоненты

Зачем это нужно

  • В основе — нативные элементы

    <button nuiButton> — настоящая кнопка. Формы, клавиатура и скринридеры работают, потому что её ничем не оборачивают.

  • Одна таблица стилей для любого фреймворка

    Компоненты — это обычный CSS в каскадных слоях: сегодня Angular, затем React, а чистый HTML — всегда.

  • Ваш CSS всегда в приоритете

    Все стили находятся внутри @layer nui, поэтому ваш CSS переопределяет их без !important и борьбы со специфичностью.

  • Доступность заложена изначально

    Каждая цветовая пара проверяется на соответствие WCAG 2.2 AA при генерации палитры. Фокус, режим принудительных цветов и уменьшение движения уже учтены.

  • Настройка сверх меры

    Пружины, эффекты нажатия, появление, форма углов, радиус и плотность: один атрибут для всего приложения или одно входное свойство на компонент — на основе стандартных дизайн-токенов W3C.

  • Современный Angular

    Signal inputs, zoneless, серверный рендеринг и отдельная точка входа для каждого компонента: в приложение попадает только то, что оно импортирует.

Два импорта — и готово

Добавьте пакет, один раз импортируйте таблицу стилей и используйте компоненты в любом standalone-компоненте.

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
usage.ts
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() {}
}