쓸데없이 잘 만든 UI 컴포넌트.

존재 이유

• 네이티브 요소 우선

  <button nuiButton>은 진짜 버튼입니다. 아무것도 감싸지 않으므로 폼, 키보드, 스크린 리더가 그대로 동작합니다.

• 스타일시트 하나로 모든 프레임워크를

  컴포넌트는 캐스케이드 레이어에 담긴 순수 CSS입니다. 지금은 Angular, 다음은 React를 지원하며, 순수 HTML에서는 언제나 쓸 수 있습니다.

• 앱의 CSS가 언제나 우선

  모든 것이 @layer nui 안에 들어 있으므로, !important나 명시도 싸움 없이 직접 작성한 스타일로 덮어쓸 수 있습니다.

• 설계부터 접근성을 고려

  팔레트를 생성할 때 모든 색상 조합을 WCAG 2.2 AA 기준으로 검사합니다. 포커스, 강제 색상 모드, 동작 줄이기 설정도 알아서 처리됩니다.

• 쓸데없이 세밀한 커스터마이징

  스프링, 누르기 효과, 등장 효과, 모서리 모양과 반경, 밀도. 앱 전체는 속성 하나로, 개별 컴포넌트는 입력 하나로 바꿀 수 있으며, 모두 표준 W3C 디자인 토큰을 기반으로 합니다.

• 모던 Angular

  시그널 입력, Zoneless, 서버 사이드 렌더링을 지원합니다. 컴포넌트마다 엔트리 포인트가 따로 있어 앱에는 가져온 것만 포함됩니다.

import 두 번이면 준비 완료

패키지를 추가하고 스타일시트를 한 번만 가져오면, 어떤 스탠드얼론 컴포넌트에서든 바로 사용할 수 있습니다.

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

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