Needless UI

ওপেন সোর্স · Angular 22 · MIT

UI কম্পোনেন্ট, দরকারের চেয়ে অনেক বেশি যত্নে ইঞ্জিনিয়ার করা।

Needless UI একটি ফ্রেমওয়ার্ক-নিরপেক্ষ স্টাইলশিট ও W3C ডিজাইন টোকেন দিয়ে নেটিভ এলিমেন্ট স্টাইল করে। এর Angular ডিরেক্টিভগুলো Angular Aria থেকে আচরণ যোগ করে, তাই প্রতিটি কম্পোনেন্ট প্রথম রেন্ডার থেকেই অ্যাক্সেসিবল।

শুরু করুন কম্পোনেন্ট দেখুন

কেন এটি তৈরি

  • আগে নেটিভ এলিমেন্ট

    <button nuiButton> একটি আসল বাটন। এর চারপাশে কিছু জড়ানো নেই বলেই ফর্ম, কীবোর্ড ও স্ক্রিন রিডার ঠিকঠাক কাজ করে।

  • একটি স্টাইলশিট, যেকোনো ফ্রেমওয়ার্ক

    কম্পোনেন্টগুলো ক্যাসকেড লেয়ারে লেখা সাধারণ CSS: আজ Angular, এরপর React, আর সাধারণ HTML সবসময়।

  • শেষ কথা বলে আপনার CSS

    সবকিছু থাকে @layer nui-এর ভেতরে, তাই !important বা স্পেসিফিসিটির লড়াই ছাড়াই আপনার নিজের স্টাইল সেটিকে ওভাররাইড করে।

  • গঠনেই অ্যাক্সেসিবল

    প্যালেট তৈরির সময় প্রতিটি রঙের জোড়া WCAG 2.2 AA অনুযায়ী যাচাই করা হয়। ফোকাস, ফোর্সড কালার্স ও রিডিউসড মোশন সামলানো হয় আপনাআপনিই।

  • অকারণ এতটা কাস্টমাইজযোগ্য

    স্প্রিং, চাপ দেওয়ার ইফেক্ট, প্রবেশের অ্যানিমেশন, কোণের আকৃতি, রেডিয়াস ও ডেনসিটি: পুরো অ্যাপের জন্য একটি অ্যাট্রিবিউট, অথবা প্রতিটি কম্পোনেন্টের জন্য একটি ইনপুট, প্রমিত W3C ডিজাইন টোকেনের ওপর।

  • আধুনিক Angular

    সিগন্যাল ইনপুট, জোনলেস, সার্ভার রেন্ডারিং আর প্রতিটি কম্পোনেন্টের আলাদা এন্ট্রি পয়েন্ট, তাই অ্যাপে শুধু ইমপোর্ট করা কোডটুকুই যায়।

দুটি ইমপোর্ট, ব্যস

প্যাকেজ যোগ করুন, স্টাইলশিট একবার ইমপোর্ট করুন, তারপর যেকোনো স্ট্যান্ডঅ্যালোন কম্পোনেন্টে কম্পোনেন্টগুলো ব্যবহার করুন।

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