Getting started

Needless UI works with Angular 22. Components are standalone directives, so there are no modules to import.

Install

Add the Angular package together with Angular Aria and the CDK, which provide keyboard and accessibility behavior. The stylesheet comes with it.

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

Import the styles

Import the stylesheet once in src/styles.css. It includes the design tokens and every component.

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

Everything ships inside @layer nui. If your app has global resets such as a { color: inherit }, put them in a layer declared before nui so they don’t override components.

Use a component

Import the directives you need from their entry points and add them to your component’s 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() {}
}

Next steps

Browse the components for live examples, or read the theming guide to match your brand.