shadcn-svelte-components
UI components with shadcn-svelte and bits-ui. Component patterns, trigger snippets,\ndialog handling, and accessibility.\nKeywords: shadcn-svelte, bits-ui, Button, Dialog, Sheet, Popover, DropdownMenu,\nTooltip, Form, Input, Select, child snippet, trigger pattern, cn utility
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
UI components with shadcn-svelte and bits-ui. Component patterns, trigger snippets,\ndialog handling, and accessibility.\nKeywords: shadcn-svelte, bits-ui, Button, Dialog, Sheet, Popover, DropdownMenu,\nTooltip, Form, Input, Select, child snippet, trigger pattern, cn utility
How to use
Zapoznaj się z dokumentacją shadcn-svelte na stronie shadcn-svelte.com oraz użyj kontekstu context7 dla referencji API dostępnych komponentów.
Importuj komponenty używając wzorca namespace — na przykład
import * as Dialog from '$comp/ui/dialog'dla dialogów lubimport { Button } from '$comp/ui/button'dla przycisków. Taki sposób importu zapewnia czystą strukturę kodu.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}.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ą.
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.
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.