1,348 free components · open source, forever

Build stunning Svelte apps faster

Beautiful UI components and page blocks for Svelte 5. Copy the code, paste into your project, and ship.

Svelte 5
Tailwind v4
TypeScript
744
Elements
372
Blocks
121
Animations
76
Charts
35
Maps
Why Svelto UI

Built for the modern web

Every design decision optimized for developer experience and end-user performance.

Built for Svelte 5

Leveraging runes, fine-grained reactivity, and the latest Svelte features for optimal performance.

Tailwind CSS v4

Modern utility-first styling with the latest Tailwind CSS features and OKLCH color support.

Copy & Paste

No npm packages to install. Copy component code directly into your project. You own it completely.

Live — try it
GeneralSwitch01.svelte View in gallery
<script>
  import { Switch } from '$lib/components/elements/switch';

  let checked = $state(false);
</script>

<!-- Basic switch -->
<div class="flex items-center justify-center p-8">
  <Switch bind:checked aria-label="Enable two-factor authentication" />
</div>
Zero Config

Own your components

No packages to install, no version conflicts, no breaking updates. Copy the source code into your project and customize everything. The switch shown here is a live component from the library, next to its exact shipped source.

  • Full control over styles and behavior
  • No dependency bloat in your bundle
  • Customize components to your needs
  • TypeScript and JSDoc support included