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?
Przejdź na Discord