开源 · Angular 22 · MIT

UI 组件,精心打磨到近乎多余。

Needless UI 用一份不依赖框架的样式表和 W3C Design Token 为原生元素添加样式。它的 Angular 指令通过 Angular Aria 提供交互行为,因此每个组件从首次渲染起就具备无障碍支持。

为何而生

  • 原生元素优先

    <button nuiButton> 就是一个真正的按钮。它外面没有包裹任何东西,所以表单、键盘和屏幕阅读器都能正常工作。

  • 一份样式表,适用任何框架

    组件就是放在级联层中的纯 CSS:现在支持 Angular,下一步是 React,纯 HTML 则始终可用。

  • 你的 CSS 永远优先

    所有样式都位于 @layer nui 中,因此你自己的样式无需 !important,也不用比拼优先级,就能直接覆盖它们。

  • 天生无障碍

    生成调色板时,每一组颜色搭配都会按照 WCAG 2.2 AA 进行校验。焦点、强制颜色模式和减弱动态效果也都已为你处理好。

  • 可定制到近乎多余

    弹簧、按压效果、入场动画、边角形状、圆角半径和密度:整个应用只需一个属性,单个组件也只需一个输入属性,全部基于标准的 W3C Design Token。

  • 现代 Angular

    Signal 输入属性、Zoneless、服务端渲染,且每个组件都有独立的入口点,应用只会打包实际导入的部分。

两处导入,大功告成

安装软件包,导入一次样式表,就可以在任意独立组件中使用这些组件了。

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
usage.ts
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() {}
}