Primeiros passos

O Needless UI funciona com o Angular 22. Os componentes são diretivas standalone, então não há módulos para importar.

Instalação

Adicione o pacote Angular junto com o Angular Aria e o CDK, que fornecem o comportamento de teclado e de acessibilidade. A folha de estilo já vem junto.

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

Importe os estilos

Importe a folha de estilo uma única vez em src/styles.css. Ela inclui os design tokens e todos os componentes.

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

Tudo fica dentro de @layer nui. Se a sua aplicação tem resets globais como a { color: inherit }, coloque-os em uma camada declarada antes de nui para que não sobrescrevam os componentes.

Use um componente

Importe as diretivas de que você precisa a partir dos pontos de entrada delas e adicione-as aos imports do seu componente.

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() {}
}

Próximos passos

Explore os componentes para ver exemplos interativos ou leia o guia de temas para adaptá-los à sua marca.