49 components.
Copy. Paste. Ship.
Production-ready Svelte 5 components for dashboards, admin panels, and SaaS interfaces. Zero dependencies beyond Svelte and Tailwind.
Enter your email to download free components. No spam.
Layout
AppShell
StarterFull app layout with sidebar, header, footer, and mobile overlay
Sidebar
StarterCollapsible navigation sidebar with title, footer slot, and toggle button
Header
StarterApp header with title, mobile hamburger, sticky mode, and action slots
PageContainer
FreeMax-width responsive page wrapper with size variants
Card
FreeFlexible card with header/body/footer, hover effect, and link variant
Divider
FreeHorizontal/vertical divider with optional label
Accordion
StarterExpandable/collapsible sections with single or multi-open mode
SplitPane
FullResizable split layout with horizontal/vertical, collapsible pane, and min constraints
Data Display
DataTable
FullSortable, paginated table with search, selection, sticky header, loading state, and empty state
StatCard
StarterMetric card with sizes, trend labels, loading skeleton, and clickable link variant
EmptyState
FreeEmpty state with icon, dual CTAs, and compact variant
Badge
FreeStatus badges with variants, dot indicators, icons, and removable option
Avatar
StarterAvatar with 5 sizes, square/circle shape, status dots, and group/stack mode
Timeline
FullVertical event timeline with icons, variants, clickable items, and compact mode
KVList
StarterKey-value list with copyable values, badges, links, and compact mode
MetricGrid
FullDashboard metrics layout with change indicators and comparison periods
Chart
FullSVG chart with bar, line, area, and pie variants. Hover tooltips, grid lines, legends, animated transitions. Zero dependencies.
Forms
FormField
StarterForm field wrapper with label, error/help, prefix/suffix, character count, and disabled state
Select
FullSearchable select with option groups, disabled options, clearable, and full keyboard navigation
DatePicker
FullCalendar date picker with min/max constraints
Toggle
FreeOn/off toggle switch with sizes, colors, description text, and disabled state
FileUpload
FullDrag-and-drop file upload with validation
TagInput
FullTag input with max limit, paste support, duplicate detection, and validation
NumberInput
StarterIncrement/decrement number input with min/max/step and keyboard support
RangeSlider
FullSingle-handle range slider with label and value display
ColorPicker
FullColor swatch grid with hex input and native color picker
TransferList
FullDual-list selector for moving items between available and selected lists. Includes search, multi-select, keyboard navigation, and batch transfer.
PinInput
FullIndividual digit input boxes for verification codes (2FA, OTP). Auto-advances, supports paste, mobile-friendly with numeric keyboard.
InlineEdit
FullClick-to-edit text component. Displays text that converts to an input on interaction. Supports single-line and textarea modes, validation, and async save.
Feedback
Modal
StarterAccessible modal with 5 sizes, scrollable body, backdrop/escape control, and full-screen mode
SlideOver
FullSide panel drawer from left or right with sizes, header, scrollable body, and footer
Toast
StarterToast notifications with icons, action buttons, position control, and max limit
ConfirmDialog
FullDestructive action confirmation with variants and loading state
Tooltip
FreeHover/focus tooltip with positioning, delay, arrows, and rich content
ProgressBar
FreeDeterminate/indeterminate progress bar with label, striped, and value display
Popover
StarterFloating content panel anchored to a trigger element
AlertBanner
FreeDismissible alert banner with info/success/warning/error variants
Skeleton
FreeLoading placeholder shimmer with text, circular, and rectangular variants
CopyButton
FreeOne-click copy to clipboard with confirmation
Navigation
Tabs
StarterTabs with underline/pills variants, icons, disabled tabs, full-width, and keyboard nav
Dropdown
StarterAction dropdown menu with icons, dividers, and keyboard navigation
Stepper
FullMulti-step wizard with progress indicators in horizontal or vertical layout
CommandPalette
FullCmd+K command menu with descriptions, keyboard shortcuts, grouped items, and footer hint
Breadcrumbs
StarterBreadcrumb trail with icons, custom separator, and auto-collapse for long paths
Specialized
ActivityFeed
FullTimeline-style feed for user actions and system events
OnboardingChecklist
FullStep-by-step onboarding checklist with progress ring
PricingTable
FullPricing tiers with monthly/annual toggle, currency prop, and highlighted tier badge
Changelog
StarterVersioned changelog with expandable entries, type filtering, and linkable versions
CodeBlock
StarterCode block with filename header, line highlighting, max-height scroll, and copy button
Svelte 5 Runes Native
Every component uses $state, $derived, $effect. No Svelte 4 compatibility layers.
Copy-Paste, Not npm
Each component is a single .svelte file. Copy into your project. Own the code. Customize everything.
Tailwind + CSS Variables
Themed with CSS custom properties. Change your brand colors once, every component follows.
Built by a developer, for developers
After rebuilding the same UI components across multiple Svelte projects, I packaged them into a production-ready library. Copy, paste, ship โ no npm installs, no dependency hell.
โ Shane Burrell ยท [email protected]
Building a SaaS?
SvelteShip is a complete SaaS starter with auth, payments, and admin โ pre-integrated with SvelteUI Pro components.
Check out SvelteShip โ from $49