shadcn-ui

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and Atlas-specific conventions using Tailwind CSS v4.

1. Skopiuj komponenty shadcn/ui do folderu src/components/ui/ w swoim projekcie Next.js 16. Każdy komponent jest plikiem TypeScript/TSX, który możesz natychmiast dostosować do swoich potrzeb.

2. Dostosuj warianty komponentów bezpośrednio w pliku – zmień kolory, rozmiary i style za pomocą Tailwind CSS v4. Skill zawiera wzorce CVA (Class Variance Authority) do zarządzania wariantami komponentów.

3. Integruj komponenty Form z react-hook-form – użyj Zod do walidacji schematów, połącz formularze z mutacjami tRPC i obsługuj błędy walidacji.

4. Buduj komponenty złożone z primitywów (Dialog, Form, Table) – komponuj je razem, aby utworzyć niestandardowe rozwiązania dla tabel danych, modali, drawersów i list.

5. Implementuj wzorce dostępności – dodaj etykiety ARIA do przycisków z ikonami, zapewnij nawigację klawiaturą, zarządzaj fokusem i osiągaj standard WCAG 2.1 AAA z minimalnym rozmiarem dotyku 44px.

6. Obsługuj stany ładowania i interakcje – używaj skeleton loading, powiadomień toast, menu dropdown, popoversów i tooltipów zgodnie z wzorcami zawartymi w skill.