Needless UI

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

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

নেটিভ এলিমেন্টের ওপর তৈরি অ্যাক্সেসিবল Angular কম্পোনেন্ট, যেগুলোর স্টাইল আসে একটিমাত্র ফ্রেমওয়ার্ক-নিরপেক্ষ স্টাইলশিট থেকে। সবকিছুই MIT লাইসেন্সে, এমনকি অন্য লাইব্রেরিগুলো যা আলাদা করে বিক্রি করে, সেটাও: রিসোর্স টাইমলাইনসহ একটি শিডিউলার, আর গ্রুপিং ও Excel এক্সপোর্টসহ একটি ডেটা গ্রিড।

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

কেন এটি তৈরি

  • প্রিমিয়াম সংস্করণ নেই

    শিডিউলারের রিসোর্স টাইমলাইন ও পুনরাবৃত্ত ইভেন্ট, আর ডেটা গ্রিডের গ্রুপিং, ট্রি ডেটা ও Excel এক্সপোর্ট বাকি সবকিছুর মতোই MIT লাইসেন্সে: কোনো লাইসেন্স কী নেই, কোনো ওয়াটারমার্কও নেই। কোনো পেইড লাইব্রেরি থেকে আসছেন? FullCalendar ও AG Grid থেকে সরে আসার গাইড পড়ুন।

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

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

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

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

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

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

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

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

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

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

  • আধুনিক Angular

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

একটি কমান্ড, তারপর একটি ইমপোর্ট

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

ng-add.sh
ng add @needless-ui/angular
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() {}
}