Shadcn-svelte-enhancements extends the Shadcn-Svelte component library with additional UI components.
It introduces additional UI components like avatar groups, code blocks, and file upload zones that complement the existing Shadcn-Svelte ecosystem.
UI Components Included
- Avatar Group
- Code Block
- Code Snippet
- Copy Button
- File Dropzone
- Link
- Password Input
- Scroll Progress Indicator
- Transfer List
Installation
Prerequisites
Make sure you have Shadcn-Svelte installed in your project.
Install with CLI
Run this command in your terminal:
npx shadcn-svelte-enhancements initDuring setup, you’ll be asked to select the components you want. This keeps your project lightweight by only including what you need.
Component Selection and Updates
If you need to update or override previously installed components, run the setup command again. You can run the command multiple times to add more components later. The CLI will prompt you to pick. Your choices will overwrite previous versions if needed.
Once the installation completes, the terminal displays a success message. The selected components will be installed and require no extra configuration.
Usage
Here’s a simple usage example:
<script lang="ts">
import { CodeSnippet } from '$lib/components/tzezars-enhancements/code-snippet';
</script>
<CodeSnippet content="console.log('Hello, world!');" />FAQs
Q: Can I add more components after the initial setup?
A: Yes, run the npx shadcn-svelte-enhancements init command again to select and install additional components.
Q: How do I update existing components?
A: Re-run the installation command. The components you select will overwrite the previous versions.
Q: Are these components styled consistently with Shadcn-Svelte?
A: Yes, these components are made to integrate with the existing styles of Shadcn-Svelte.
Q: What if I only need one or two components?
A: The CLI lets you select only the components you need, preventing unnecessary bloat in your project.
