shadcn-svelte-components

Zestaw gotowych komponentów interfejsu użytkownika oparty na shadcn-svelte i bits-ui. Zawiera przyciski, dialogi, menu rozwijane, tooltips, formularze i pola wejściowe z wbudowaną obsługą dostępności. Umożliwia szybkie budowanie interfejsów z prawidłową obsługą klawiatury, delegacją atrybutów ARIA i wzorcami Svelte. Idealne dla deweloperów pracujących z SvelteKit, którzy chcą uniknąć ręcznego pisania komponentów dostępnych.

1. Zapoznaj się z dokumentacją shadcn-svelte na stronie shadcn-svelte.com oraz użyj kontekstu context7 dla referencji API dostępnych komponentów.

2. Importuj komponenty używając wzorca namespace — na przykład import * as Dialog from '$comp/ui/dialog' dla dialogów lub import { Button } from '$comp/ui/button' dla przycisków. Taki sposób importu zapewnia czystą strukturę kodu.

3. Przy łączeniu komponentów trigger (takich jak Tooltip czy DropdownMenu) z niestandardowymi elementami jak Button, zawsze używaj wzorca child snippet. Opakowuj element wewnątrz bloku {#snippet child({ props })} i przekazuj props do komponentu za pomocą {...props}.

4. Wzorzec child snippet gwarantuje pojedynczy punkt fokusa, prawidłową delegację atrybutów ARIA oraz dostępność z klawiatury. Unikaj umieszczania komponentów bezpośrednio wewnątrz Trigger bez snippetu — powoduje to podwójne tabulatory i problemy z dostępnością.

5. Komponenty dostępne w zestawie to między innymi Button, Dialog, Sheet, Popover, DropdownMenu, Tooltip, Form, Input i Select. Wybierz odpowiedni komponent dla swojego przypadku użycia i dostosuj go za pomocą dostępnych wariantów i rozmiarów.

6. Użyj narzędzia cn do łączenia klas CSS, jeśli potrzebujesz dodatkowych stylów. Wszystkie komponenty są już stylizowane, ale możesz je rozszerzać zgodnie z potrzebami projektu.