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