radix-ui-design-system
Buduj dostępne systemy designu z komponentami Radix UI bez narzuconych stylów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia produkcyjnych systemów designu opartych na prymitywach Radix UI. Otrzymujesz w pełni dostosowalne, niestyizowane komponenty z wbudowaną dostępnością (WAI-ARIA, nawigacja klawiaturą, wsparcie czytników ekranu). Idealne do budowania bibliotek komponentów UI od zera, implementacji złożonych interaktywnych elementów (Dialog, Dropdown, Tabs) i migracji z gotowych bibliotek. Pełna kontrola nad zachowaniem i wyglądem bez walki z domyślnymi stylami.
Jak używać
Zainstaluj Radix UI w swoim projekcie React 16.8+ za pomocą npm lub yarn. Skill zakłada, że masz już skonfigurowane środowisko React z obsługą hooks.
Zidentyfikuj komponenty, które potrzebujesz w swoim systemie designu — Radix oferuje prymitywy takie jak Dialog, Dropdown, Tabs, Tooltip i wiele innych. Każdy z nich jest niestyizowany i gotów do customizacji.
Zdefiniuj architekturę themingu — zdecyduj, czy będziesz używać zmiennych CSS, Tailwind CSS czy innego podejścia. Radix nie narzuca opinii na temat stylowania, więc masz pełną swobodę.
Implementuj komponenty złożone, łącząc proste prymitywy Radix w większe, wielofunkcyjne elementy. Skill prowadzi przez wzorce komponentów złożonych (compound components) do budowania skalowanych bibliotek.
Zapewnij dostępność na poziomie WCAG 2.1 AA/AAA — Radix ma wbudowaną obsługę nawigacji klawiaturą, atrybutów ARIA i wsparcia dla czytników ekranu, ale skill pokazuje, jak to weryfikować i rozszerzać.
Testuj i iteruj swój system designu, korzystając z dokumentacji Radix do poznania szczegółów każdego komponentu i jego możliwości konfiguracji.