Components

ShadCN Components

Installing and using ShadCN components in your SvelteLaunch application

# Introduction

shadcn-svelte is a collection of customizable UI components for Svelte applications. This guide will walk you through the process of installing and using shadcn-svelte components in your SvelteLaunch project.

# Adding Components

To add a shadcn-svelte component to your project:

1. Use the shadcn-svelte CLI to add the desired component:

           npx shadcn-svelte add [component-name]
   
         

   Replace [component-name] with the name of the component you want to add (e.g., button, card, accordion).

2. The component and its dependencies will be added to your project in the src/lib/components/ui directory.

# Using Components

To use a shadcn-svelte component in your SvelteLaunch project:

1. Import the component from the $lib/components/ui directory:

           <script>
   import { Button } from '$lib/components/ui/button';
   </script>
   
         

2. Use the component in your Svelte template:

           <Button>Click me</Button>
   
         

# Customizing Components

shadcn-svelte components are designed to be easily customizable. To modify a component:

1. Locate the component file in the src/lib/components/ui directory.

2. Open the component file and modify the styles or behavior as needed.

3. For styling changes, you can modify the Tailwind CSS classes directly in the component file.

4. For more extensive customizations, you can create a new component that extends the base shadcn-svelte component.

Example of customizing a Button component:

        <script>
import { Button as BaseButton } from '$lib/components/ui/button';

const { children } = $props();
</script>

<BaseButton class="bg-primary-500 hover:bg-primary-600 text-white font-bold">
  {@render children}
</BaseButton>

      

# Available Components

1. Accordion
2. Alert
3. Alert Dialog
4. Aspect Ratio
5. Avatar
6. Badge
7. Button
8. Calendar
9. Card
10. Carousel
11. Checkbox
12. Collapsible
13. Combobox
14. Command
15. Context Menu
16. Data Table
17. Date Picker
18. Dialog
19. Drawer
20. Dropdown Menu
21. Form
22. Hover Card
23. Input
24. Label
25. Menubar
26. Navigation Menu
27. Pagination
28. Popover
29. Progress
30. Radio Group
31. Scroll Area
32. Select
33. Separator
34. Sheet
35. Skeleton
36. Slider
37. Switch
38. Table
39. Tabs
40. Textarea
41. Toast
42. Toggle
43. Toggle Group
44. Tooltip

For detailed information on each component, including props, usage examples, and customization options, click on the component name to visit its documentation page. Each link will open in a new tab.