Getting Started
Install SvelteUI Pro and add your first component in under 5 minutes.
1 Unzip and copy
# Unzip the download
unzip svelteui-pro.zip
# Copy the components into your project
cp -r svelteui-pro/components/ src/lib/components/
SvelteUI Pro components are plain .svelte files — no npm package, no dependencies. Copy them into your project and they're yours.
2 Requirements
Components use Svelte 5 runes ($state, $derived, $bindable, $props) and Tailwind CSS utility classes. No other dependencies.
3 Tailwind CSS 4 setup
Tailwind CSS 4 uses the Vite plugin instead of PostCSS. Make sure your vite.config.js includes it:
// vite.config.js
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()],
});
Components use a brand-500 / brand-400 color palette. See the Theming guide to customize it.
4 Use your first component
<script>
import Badge from '$lib/components/data/Badge.svelte';
</script>
<Badge variant="success">
Active
</Badge>
That's it! Browse the component library to see all 45 components.
5 File structure
components/
├── data/ # Badge, StatCard, Avatar, ...
├── feedback/ # Modal, Toast, Tooltip, ...
├── forms/ # Select, DatePicker, Toggle, ...
├── layout/ # AppShell, Sidebar, Card, ...
├── nav/ # Tabs, Breadcrumbs, Dropdown, ...
└── specialized/ # CodeBlock, PricingTable, ...
Need help?
Check the component docs for usage examples and API references.