Biblioteki

W kontekście budowania Design Systemów, biblioteki typu headless zdobywają coraz większą popularność. Jak już wiemy, zapewniają one zestaw komponentów, które można łatwo dostosować do własnych potrzeb, ponieważ nie narzucają one konkretnego wyglądu ani stylu. Dzięki temu można je zintegrować / dostosować do naszych potrzeb.

Oto kilka najpopularniejszych bibliotek Headless UI, które warto poznać:

Radix

Radix dzielimy na dwa osobne byty: Radix Primitives (nieostylowane, a11y-ready komponenty) oraz Radix UI (komponenty już z zaaplikowanymi domyślnymi stylami).

Headless UI od Tailwind Labs

Jest to biblioteka opracowana przez twórców Tailwind CSS. Zawiera komponenty takie jak Dropdown, Modal, Tabs i inne, które można stylizować według własnych potrzeb.

React Aria od Adobe

Ta biblioteka skupia się na dostępności (accessibility). Zawiera zestaw hooków i komponentów, które pomagają tworzyć aplikacje zgodne z WAI-ARIA. Jest ona częścią większego ekosystemu React Spectrum, ale może być używana samodzielnie.

Reakit

Reakit oferuje bogaty zestaw komponentów, które są zgodne z WAI-ARIA i jak nie trudno się domyśleć, są one kompatybilne tylko z Reactem.

Ark

Biblioteka Headless UI od twórców popularnej biblioteki UI, chakra-ui. Dobrze współpracuje z Reactem, Solidem oraz Vue.

Shadcn

Warto również mieć na uwadze projekt Shadcn, który to jest gotowym, copy/paste-friendly Design Systemem, w którym znajdziemy komponenty typu headless pochodzące m.in. z Radix Primitives, którą są wstępnie ostylowane za pomocą Tailwinda.

Może to być fajny punkt startowy do tworzenia własnych komponentów w Twoim Design Systemie.

Masz pytania lub uwagi?

discord icon Przejdź na Discord
Masz pytanie? Napisz do nas 👇
kontakt@frontstack.pl
Copyright © 2023 Frontstack