শুরু করুন

Needless UI, Angular 22-এর সঙ্গে কাজ করে। কম্পোনেন্টগুলো স্ট্যান্ডঅ্যালোন ডিরেক্টিভ, তাই কোনো মডিউল ইমপোর্ট করতে হয় না।

ইনস্টল করুন

ng add চালান। এটি Angular প্যাকেজটি যোগ করে, সঙ্গে Angular Aria ও CDK-ও, যেগুলো কীবোর্ড ও অ্যাক্সেসিবিলিটির আচরণ দেয়। এটি আপনার গ্লোবাল স্টাইলে স্টাইলশিটও ইমপোর্ট করে দেয়।

ng add @needless-ui/angular

এর বদলে নিজে হাতে সেট আপ করতে চাইলে প্যাকেজগুলো যোগ করুন, তারপর নিচে দেখানো উপায়ে স্টাইল ইমপোর্ট করুন।

pnpm add @needless-ui/angular @angular/aria @angular/cdk

স্টাইল ইমপোর্ট করুন

স্টাইলশিটটি src/styles.css-এর একেবারে ওপরে একবারই ইমপোর্ট করা হয়, ঠিক যেখানে ng add এটি বসায়। Sass স্টাইলশিটে এর বদলে @use '@needless-ui/css'; লিখুন। স্টাইলশিটটিতে ডিজাইন টোকেন ও সব কম্পোনেন্ট আছে।

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

সবকিছু থাকে @layer nui-এর ভেতরে। আপনার অ্যাপে a { color: inherit }-এর মতো গ্লোবাল রিসেট থাকলে সেগুলো nui-এর আগে ঘোষিত কোনো লেয়ারে রাখুন, যাতে সেগুলো কম্পোনেন্টকে ওভাররাইড না করে।

Tailwind CSS ব্যবহার করলে nui লেয়ারটি Tailwind-এর base লেয়ারের পরে এবং এর ইউটিলিটিগুলোর আগে ঘোষণা করুন: তাহলে Tailwind-এর রিসেট কম্পোনেন্টকে ওভাররাইড করতে পারবে না, আর ইউটিলিটি ক্লাস তখনও কম্পোনেন্টের চেয়ে অগ্রাধিকার পাবে। Tailwind খুঁজে পেলে ng add নিজেই এটি করে দেয়।

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

কম্পোনেন্ট ব্যবহার করুন

যে ডিরেক্টিভগুলো দরকার সেগুলো তাদের এন্ট্রি পয়েন্ট থেকে ইমপোর্ট করুন, এবং আপনার কম্পোনেন্টের imports-এ যোগ করুন।

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

পরবর্তী ধাপ

লাইভ উদাহরণের জন্য কম্পোনেন্ট দেখুন, অথবা আপনার ব্র্যান্ডের সঙ্গে মেলাতে থিমিং গাইড পড়ুন।