Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
How to install dependencies and structure your app.
Getting Started
Create Project
Create a new Svelte project using the official SvelteKit CLI:
pnpm dlx sv create my-app
Make sure to select Tailwind CSS when prompted.
Configure Shadcn Svelte
Initialize Shadcn Svelte in your project:
pnpm dlx shadcn-svelte@latest init
Use the default configuration or customize to fit your needs.
Install Motion
Install the motion-sv animation library:
pnpm add motion-sv
Add Components
Install any component using the CLI. Example with Morphing Text:
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/morphing-text.json
Usage Example
Here's how to use the Morphing Text component: