Copy and paste beautiful components into your Svelte 5 project. No package to install — you own the code.
Built with shadcn-svelte patterns and bits-ui primitives.
Set up a new SvelteKit project with Tailwind CSS and shadcn-svelte.
Create $lib/components/ui folder and add the cn() utility function.
Copy our CSS variables for colors, spacing, and dark mode support.
Browse components and copy the ones you need into your project.
Set up a new SvelteKit project with Tailwind CSS and all dependencies.
Create a new SvelteKit project with Tailwind CSS and shadcn-svelte:
$ npx sv create my-app $ cd my-app $ npx sv add tailwindcss $ npx shadcn-svelte@latest init $ npm install @lucide/svelte $ npx shadcn-svelte@latest add --all
This installs all required dependencies: bits-ui, tailwind-variants, clsx, tailwind-merge, and mode-watcher.
Add to an existing SvelteKit project with Tailwind CSS already configured:
$ npm install bits-ui clsx tailwind-merge tailwind-variants mode-watcher @lucide/svelteThese packages are automatically installed by shadcn-svelte init. Here for reference.
If you want to use our Chart components, install LayerCake and D3:
$ npm install layercake d3 d3-scaleIf you want to use our Map components, install deck.gl:
$ npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layersCreate the cn() helper function for merging Tailwind classes.
Create src/lib/utils.js with the cn() function:
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs) {
return twMerge(clsx(inputs));
}Your project should look like this:
Components go in src/lib/components/ui/
Add CSS variables for colors and styling. Copy our theme or customize your own.
Add these CSS custom properties to your layout.css file. We use oklch colors for better color mixing.
@theme { --color-background: oklch(1 0 0); --color-foreground: oklch(0.145 0 0); --color-primary: oklch(0.205 0 0); --color-primary-foreground: oklch(0.985 0 0); /* ... more colors */ }
Browse our component library and copy the ones you need.
After copying a component, import and use it like any other Svelte component.
<script> import { Button } from '$lib/components/elements/button'; import { Badge } from '$lib/components/elements/badge'; </script> <div class="p-6 border rounded-lg"> <h2 class="text-xl font-bold mb-4">Hello</h2> <Badge>New</Badge> <Button>Click me</Button> </div>
Use our API to search and retrieve component code programmatically. Perfect for AI assistants like Claude Desktop.
/api/mcp API documentation and overview
/api/mcp/search Search components by query
/api/mcp/component/{id} Get component source code
/api/mcp/styles Browse by design style
/api/mcp/categories List all categories
/api/mcp/suggest Get suggestions for use cases
/api/mcp/similar/{id} Find similar components
/api/mcp/lucide Search Lucide icons for Svelte 5
Search for Lucide icons and get usage examples for Svelte 5. Includes sizing, colors, stroke width, filled styles, and global styling.
# Search for arrow icons curl "https://sveltoui.dev/api/mcp/lucide?q=arrow" # Search within a specific category curl "https://sveltoui.dev/api/mcp/lucide?q=home&category=navigation" # Get all icon categories curl "https://sveltoui.dev/api/mcp/lucide?action=categories" # Get all icons in a category curl "https://sveltoui.dev/api/mcp/lucide?category=user"
# Get detailed usage info for an icon curl "https://sveltoui.dev/api/mcp/lucide?icon=Home" # Get Lucide Svelte documentation curl "https://sveltoui.dev/api/mcp/lucide?action=docs"
When using SveltoUI via MCP, these Lucide icon tools are available:
search_lucide_icons Search icons by name or keyword
get_lucide_icon_usage Get detailed usage info for an icon
get_lucide_categories List all icon categories
get_lucide_docs Get Lucide Svelte documentation
Add SveltoUI as an MCP server to search and retrieve components using natural language.
Choose the method that works best for you. No authentication required - the API is publicly accessible:
Run this command in your terminal to add SveltoUI MCP server:
claude mcp add -t http -s user sveltoui https://sveltoui.dev/api/mcp/sse
Add to your claude_desktop_config.json:
~/Library/Application Support/Claude/claude_desktop_config.json~/.config/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"sveltoui": {
"type": "http",
"url": "https://sveltoui.dev/api/mcp/sse"
}
}
}Note: The SveltoUI MCP API is publicly accessible - no API key or authentication required!
For Claude Desktop, close and reopen the app. For Claude Code CLI, the server is immediately available. You should now see SveltoUI tools available.
Once configured, you can ask Claude things like:
"Find me a glassmorphism button component"
"Get the code for a neobrutalism input"
"Suggest components for a landing page"
"Show me cyberpunk-styled cards"
"Search for arrow icons in Lucide"
"How do I use the Home icon with a custom size?"
"Show me navigation icons from Lucide"
"How do I add filled style to a Lucide icon?"
Browse our component library and start copying components into your project.