Needless UI

Código aberto · Angular 22 · MIT

Componentes de UI, desnecessariamente bem feitos.

O Needless UI estiliza elementos nativos com uma única folha de estilo independente de framework e design tokens W3C. Suas diretivas Angular adicionam o comportamento do Angular Aria, então todo componente é acessível desde a primeira renderização.

Começar Ver componentes

Por que ele existe

  • Elementos nativos em primeiro lugar

    <button nuiButton> é um botão de verdade. Formulários, teclado e leitores de tela funcionam porque nada o envolve.

  • Uma folha de estilo, qualquer framework

    Os componentes são CSS puro em camadas de cascata: Angular hoje, React em seguida, HTML simples sempre.

  • Seu CSS sempre vence

    Tudo fica dentro de @layer nui, então seus próprios estilos o sobrescrevem sem !important nem brigas de especificidade.

  • Acessível desde a base

    Cada par de cores é verificado segundo as WCAG 2.2 AA quando a paleta é gerada. Foco, cores forçadas e movimento reduzido já vêm resolvidos.

  • Desnecessariamente personalizável

    Molas, efeitos ao pressionar, animações de entrada, formatos de canto, raio e densidade: um atributo para a aplicação inteira ou um input por componente, sobre design tokens W3C padronizados.

  • Angular moderno

    Signal inputs, zoneless, renderização no servidor e um ponto de entrada por componente, para que as aplicações incluam só o que importam.

Dois imports e pronto

Adicione o pacote, importe a folha de estilo uma vez e use os componentes em qualquer componente 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() {}
}