시작하기

Needless UI는 Angular 22에서 동작합니다. 컴포넌트는 스탠드얼론 디렉티브이므로 가져올 모듈이 없습니다.

설치

키보드 및 접근성 동작을 제공하는 Angular Aria, CDK와 함께 Angular 패키지를 추가합니다. 스타일시트도 함께 설치됩니다.

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

스타일 가져오기

src/styles.css에서 스타일시트를 한 번만 가져옵니다. 디자인 토큰과 모든 컴포넌트가 포함되어 있습니다.

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

모든 것이 @layer nui 안에 들어 있습니다. 앱에 a { color: inherit } 같은 전역 리셋이 있다면, 컴포넌트를 덮어쓰지 않도록 nui보다 먼저 선언한 레이어에 넣어야 합니다.

컴포넌트 사용하기

필요한 디렉티브를 각 엔트리 포인트에서 가져와 컴포넌트의 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() {}
}

다음 단계

라이브 예제는 컴포넌트에서 확인할 수 있습니다. 브랜드에 맞게 꾸미려면 테마 설정 가이드를 읽어 보시기 바랍니다.