UI 元件，精心打磨到近乎多餘。

為何而生

• 原生元素優先

  <button nuiButton> 就是真正的按鈕。它外面沒有包覆任何東西，所以表單、鍵盤和螢幕閱讀器都能正常運作。

• 一份樣式表，適用任何框架

  元件就是放在 cascade layer 中的純 CSS：現在支援 Angular，接下來是 React，純 HTML 則永遠適用。

• 你的 CSS 永遠優先

  所有樣式都位於 @layer nui 中，因此你自己的樣式不需要 !important，也不必比拚權重，就能直接覆寫它們。

• 天生無障礙

  產生調色盤時，每一組顏色搭配都會依照 WCAG 2.2 AA 進行檢查。焦點、強制色彩模式和減少動態效果也都已經幫你處理好。

• 可客製化到近乎多餘

  彈簧、按壓效果、進場動畫、邊角形狀、圓角半徑和密度：整個應用程式只要一個屬性，單一元件也只要一個輸入屬性，全部以標準的 W3C Design Token 為基礎。

• 現代 Angular

  Signal 輸入屬性、Zoneless、伺服器端渲染，而且每個元件都有獨立的進入點，應用程式只會打包實際匯入的部分。

兩處匯入，大功告成

安裝套件、匯入一次樣式表，就能在任何獨立元件中使用這些元件。

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