Getting started

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

Install

Run ng add. It adds the Angular package together with Angular Aria and the CDK, which provide keyboard and accessibility behavior, and imports the stylesheet in your global styles.

ng add @needless-ui/angular

To set it up by hand instead, add the packages, then import the styles as shown below.

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

Import the styles

The stylesheet goes once at the top of src/styles.css, where ng add puts it. In a Sass stylesheet, write @use '@needless-ui/css'; instead. 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.

With Tailwind CSS, declare nui after Tailwind’s base layer and before its utilities: its reset then can’t undo components, and utility classes still win over them. ng add does this when it finds Tailwind.

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

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.