Primeros pasos

Needless UI funciona con Angular 22. Los componentes son directivas standalone, así que no hay módulos que importar.

Instalación

Ejecuta ng add. El comando añade el paquete de Angular junto con Angular Aria y el CDK, que aportan el comportamiento de teclado y de accesibilidad, e importa la hoja de estilos en tus estilos globales.

ng add @needless-ui/angular

Si prefieres configurarlo todo a mano, añade los paquetes y luego importa los estilos como se muestra más abajo.

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

Importa los estilos

La hoja de estilos va una sola vez al principio de src/styles.css, donde la coloca ng add. En una hoja de estilos Sass, escribe en su lugar @use '@needless-ui/css';. Incluye los tokens de diseño y todos los componentes.

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

Todo va dentro de @layer nui. Si tu aplicación tiene resets globales como a { color: inherit }, ponlos en una capa declarada antes de nui para que no sobrescriban los componentes.

Con Tailwind CSS, declara nui después de la capa base de Tailwind y antes de sus utilidades: así su reset no puede sobrescribir los componentes, y las clases de utilidad siguen imponiéndose a ellos. ng add lo hace por ti cuando detecta Tailwind.

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

Usa un componente

Importa las directivas que necesites desde sus puntos de entrada y añádelas a los imports de tu 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 pasos

Explora los componentes para ver ejemplos en vivo, o lee la guía de temas para adaptarlos a tu marca.