Product Svelte 5 2024

SveltoUI

2,065+ copy-paste components for Svelte 5. No npm packages, no version conflicts — copy the code, own it completely. Elements, animations, charts, maps, and full page blocks, all built on Tailwind CSS v4 and bits-ui.

Platform

sveltoui.dev

Visit Site
SveltoUI Component Library
2,065+ Components

Platform Statistics

1,248

UI elements across 82 categories

521

Page blocks across 37 categories

179

Animations across 56 categories

82

Charts across 21 categories

2,065+ Copy-Paste Components

A comprehensive library spanning UI elements, animations, data visualizations, geospatial maps, and pre-built page blocks — all free and open source with zero npm dependencies.

SveltoUI Component Examples
82 Element Categories
SveltoUI Page Blocks
37 Block Categories
AccordionButtonCardDialogDrawerData TableCarouselTabsTooltipCalendarDate PickerColor Picker + 70 more

Built for Svelte 5, Not Ported From React

Every component uses Svelte 5 runes natively. No wrapper layers, no legacy syntax, no React-to-Svelte ports. Tailwind CSS v4 with OKLCH color support gives designers perceptually uniform color systems out of the box.

Copy-Paste Components

No npm packages, no version conflicts, no breaking updates. Copy components into your project and customize freely — ship features instead of debugging dependencies.

Svelte 5 Runes

Built from the ground up for Svelte 5 runes ($state, $derived) — no legacy Svelte 4 syntax, no migration debt.

Tailwind CSS v4

OKLCH color system for perceptually uniform colors. Theme changes propagate across all components instantly via CSS variables.

Accessible Components

Built on bits-ui primitives with ARIA labels, keyboard navigation, and screen reader support out of the box — accessibility by default, not as an afterthought.

Dark Mode Support

Every component supports dark mode out of the box with seamless theme switching.

Interactive Charts

82 chart types across 21 categories built on LayerCake and D3.js. Drop a chart into a dashboard in minutes, not hours.

deck.gl Maps

35 map components across 23 categories powered by deck.gl — from heatmaps to hexbin layers, ready for geospatial dashboards.

Page Blocks

521 pre-built page sections across 37 categories. Assemble a complete landing page from hero to footer without designing from scratch.

Animations

179 animation components across 56 categories — scroll reveals, hover effects, and page transitions that make apps feel polished.

Component Categories

Elements

1,248

Animations

179

Charts

82

Maps

35

Blocks

521

Platform Highlights

Developer Experience

  • Zero npm dependencies — no node_modules bloat, no supply chain risk
  • Comprehensive TypeScript and JSDoc support with full IntelliSense
  • Every component has a live preview, code snippet, and prop documentation
  • 2,065+ components across 6 categories — most Svelte 5 projects covered out of the box

Open Source

  • Completely free and open source — no license fees, no paywall tiers
  • Full code ownership — fork, modify, and redistribute without restriction
  • No version lock-in: your copied components never break from upstream changes
  • Actively maintained with new components and categories added regularly

Build faster with SveltoUI

2,065+ components, zero dependencies, full code ownership. Copy what you need and ship your Svelte 5 project faster.

Explore SveltoUI