#headlessui — Public Fediverse posts

Доступность как архитектура UI

Использование WAI-ARIA как основы архитектуры UI-компонентов даёт неожиданные преимущества: Ускоряет разработку — у вас есть готовые паттерны для большинства случаев Упрощает рефакторинг — чёткая структура кода позволяет легко вносить изменения Улучшает коммуникацию — единая терминология помогает в общении с дизайнерами Повышает качество — вы не забудете про важные детали вроде focus management Повышает конкурентноспособность - продукт не столкнется с государственным или иным регулированием

https://habr.com/ru/articles/923926/

#доступность #a11y #ARIA #проектирование_интерфейсов #разработка_интерфейсов #headlessui

🌟 Developers, take your UI game to the next level!

Check out Learn Headless UI, a Next.js template for mastering the integration of Headless UI components.

🎯 Learn, build, and create dynamic user experiences.

🔗 Get your template here: https://getnextjsthemes.com/product/learn-headless-ui

#WebDev #Nextjs #HeadlessUI #NextJsThemes #LandingPage #Templates #nextjstemplates #WebDevelopment #Frontend #coding #webdesign

Headless, boneless, skinless & lifeless UI

• 🧩 Four key #UI abstraction patterns revolutionizing #frontend development:
• 💻 #headless UI: Components with functionality + minimal styling (e.g., #HeadlessUI, #ArkUI)
• 🎨 #boneless UI: Style systems without markup (e.g., #Tailwind, #Bulma)
• 🦴 #skinless UI: Functioning components without styles (e.g., #ReactAria)
• 🔄 #lifeless UI: Typesafe hooks without rendering (e.g., #TanStack, #FloatingUI)

Each approach offers unique benefits for building custom design systems and application logic.

Covers popular tools like #HeadlessUI, #Tailwind, #ReactAria, and #TanStack.

Learn more: https://nerdy.dev/headless-boneless-and-skinless-ui

Headless, boneless, skinless & lifeless UI

• 🧩 Four key #UI abstraction patterns revolutionizing #frontend development:
• 💻 #headless UI: Components with functionality + minimal styling (e.g., #HeadlessUI, #ArkUI)
• 🎨 #boneless UI: Style systems without markup (e.g., #Tailwind, #Bulma)
• 🦴 #skinless UI: Functioning components without styles (e.g., #ReactAria)
• 🔄 #lifeless UI: Typesafe hooks without rendering (e.g., #TanStack, #FloatingUI)

Each approach offers unique benefits for building custom design systems and application logic.

Covers popular tools like #HeadlessUI, #Tailwind, #ReactAria, and #TanStack.

Learn more: https://nerdy.dev/headless-boneless-and-skinless-ui

Headless, boneless, skinless & lifeless UI

• 🧩 Four key #UI abstraction patterns revolutionizing #frontend development:
• 💻 #headless UI: Components with functionality + minimal styling (e.g., #HeadlessUI, #ArkUI)
• 🎨 #boneless UI: Style systems without markup (e.g., #Tailwind, #Bulma)
• 🦴 #skinless UI: Functioning components without styles (e.g., #ReactAria)
• 🔄 #lifeless UI: Typesafe hooks without rendering (e.g., #TanStack, #FloatingUI)

Each approach offers unique benefits for building custom design systems and application logic.

Covers popular tools like #HeadlessUI, #Tailwind, #ReactAria, and #TanStack.

Learn more: https://nerdy.dev/headless-boneless-and-skinless-ui

Headless, boneless, skinless & lifeless UI

• 🧩 Four key #UI abstraction patterns revolutionizing #frontend development:
• 💻 #headless UI: Components with functionality + minimal styling (e.g., #HeadlessUI, #ArkUI)
• 🎨 #boneless UI: Style systems without markup (e.g., #Tailwind, #Bulma)
• 🦴 #skinless UI: Functioning components without styles (e.g., #ReactAria)
• 🔄 #lifeless UI: Typesafe hooks without rendering (e.g., #TanStack, #FloatingUI)

Each approach offers unique benefits for building custom design systems and application logic.

Covers popular tools like #HeadlessUI, #Tailwind, #ReactAria, and #TanStack.

Learn more: https://nerdy.dev/headless-boneless-and-skinless-ui

I’m using the Radio component from headlessui and finding any other input fields inside RadioGroup act strangely. Namely, Space, Enter, and Arrow* keys are swallowed up. Finding if I capture them myself, and stopPropagation, things begin to work “as expected”, but I’m wondering why/how this is happening in the first place and whether I’m in for a world of hurt by trapping them myself.

Attaching screenshot of why I want/need input fields with radios.

#typescript #react #headlessui #tailwindcss

https://github.com/getAlby/lightning-browser-extension/issues/1566
This is a "good first issue" for contributors who are interested in @tailwindcss and #headlessui. Our tabs need a design update! We're happy to guide you on your first contribution! #goodfirstissue