Needless UI

Mã nguồn mở · Angular 22 · MIT

Component UI, chăm chút kỹ hơn mức cần thiết.

Needless UI tạo kiểu cho phần tử native bằng một stylesheet độc lập với framework và design token W3C. Các directive Angular bổ sung hành vi từ Angular Aria, nên mọi component đều hỗ trợ tiếp cận ngay từ lần render đầu tiên.

Bắt đầu Xem các component

Lý do ra đời

  • Ưu tiên phần tử native

    <button nuiButton> là một nút thật sự. Biểu mẫu, bàn phím và trình đọc màn hình đều hoạt động bình thường vì không có gì bọc quanh nó.

  • Một stylesheet, mọi framework

    Component là CSS thuần trong cascade layer: hôm nay là Angular, tiếp theo là React, còn HTML thuần thì lúc nào cũng dùng được.

  • CSS của bạn luôn thắng

    Mọi thứ đều nằm trong @layer nui, nên style của bạn ghi đè được mà không cần !important hay phải vật lộn với specificity.

  • Hỗ trợ tiếp cận ngay từ thiết kế

    Mọi cặp màu đều được kiểm tra theo WCAG 2.2 AA khi tạo bảng màu. Focus, chế độ forced colors và giảm chuyển động đều đã được xử lý sẵn.

  • Tùy biến đến mức thừa thãi

    Lò xo, hiệu ứng nhấn, hiệu ứng xuất hiện, hình dạng góc, bo góc và mật độ: một thuộc tính cho cả ứng dụng, hoặc một input cho mỗi component, dựa trên design token W3C chuẩn.

  • Angular hiện đại

    Signal input, zoneless, render phía máy chủ và mỗi component một entry point riêng, nên ứng dụng chỉ đóng gói những gì nó import.

Hai lệnh import là xong

Thêm gói, import stylesheet một lần, rồi dùng component trong bất kỳ standalone component nào.

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