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