آشنایی با @headlessui/react: ساخت کامپوننت‌های قابل دسترس بدون استایل

🧠 هدلس یعنی چی؟

در دنیای توسعه رابط کاربری، واژهی Headless به این معنیه که کامپوننتهای آمادهای داریم که هیچ استایلی ندارند. یعنی فقط منطق رفتاری و تعاملها رو مدیریت میکنن، و تو آزادی کامل داری که ظاهرشون رو با CSS یا Tailwind بسازی.

@headlessui/react دقیقا همین کار رو برای ما انجام میده!

🎯 این پکیج چه کاری میکنه؟

@headlessui/react مجموعهای از کامپوننتهای بدون استایل ولی با رفتار کامل هست که توسط تیم Tailwind CSS توسعه داده شده. این کامپوننتها:

• قابل دسترس (Accessible - با پشتیبانی از کیبورد و screen reader)
• بدون استایل
• به راحتی با Tailwind CSS یا CSS سفارشی قابل استایلدهی هستن

📦 نصب

npm install @headlessui/react

اگر از قبل در پروژه تون تیلویند نصب نشده میتونید نصب کنید زیرا معمولا با Tailwind CSS استفاده میشه:

npm install tailwindcss

مثلا اگر شما نکست جی اس رو با تیلویند نصب کردید دیگه نیازی به نصب تیلویند ندارید.

🧩 چند کامپوننت معروف در @headlessui/react

1. Dialog: برای مودالها (Modal)
2. Menu: برای منوهای کشویی
3. Disclosure: برای FAQ یا آکاردئون
4. Popover: مثل تولتیپ یا dropdown پیشرفته
5. Listbox: لیست انتخاب (مثل select با قابلیت استایل بالا)
6. Switch: برای سوییچهای فعال/غیرفعال (مثل toggle)

✅ یک مثال ساده: مودال با Dialog

import { Dialog } from '@headlessui/react'
import { useState } from 'react'

export default function MyModal() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button ={() => setIsOpen(true)} className=&quotbg-blue-500 text-white px-4 py-2 rounded&quot>
        باز کردن مودال
      </button>

      <Dialog open={isOpen} ={() => setIsOpen(false)} className=&quotrelative z-50&quot>
        <div className=&quotfixed inset-0 bg-black/30&quot aria-hidden=&quottrue&quot />
        <div className=&quotfixed inset-0 flex items-center justify-center&quot>
          <Dialog.Panel className=&quotbg-white rounded p-6 max-w-sm w-full&quot>
            <Dialog.Title className=&quottext-lg font-bold&quot>عنوان مودال</Dialog.Title>
            <Dialog.Description className=&quotmt-2 text-gray-600&quot>
              این یک مودال ساده است.
            </Dialog.Description>
            <button ={() => setIsOpen(false)} className=&quotmt-4 bg-red-500 text-white px-4 py-2 rounded&quot>
              بستن
            </button>
          </Dialog.Panel>
        </div>
      </Dialog>
    </>
  )
}

چرا از @headlessui/react استفاده کنیم؟

مزیت ها:

✅ قابل دسترس بودن

🎨 آزادی در طراحی

⚙️ منطق داخلی آماده

🔗 هماهنگ با Tailwind CSS

🔚 خلاصه

اگر دنبال ساخت رابط کاربری تمیز، قابل دسترس و کاملاً سفارشی با ریاکت هستی، پکیج @headlessui/react یکی از بهترین گزینههاست. مخصوصاً اگه از Tailwind استفاده میکنی، این کامپوننتها میتونن بهت کلی زمان و کد اضافی رو صرفهجویی کنن.

اگه خواستی، میتونم یه پروژه Next.js ساده با Headless UI راه بندازم برات، یا بگم چطوری تو پروژه فعلیت ازش استفاده کنی. دوست داری؟ با من در ارتباط باش :

https://zil.ink/seyedahmaddev