List Of Svelte UI Libraries

Published Dec 11, 2022

Table of Contents

Headless Libraries

These Svelte UI libraries don’t provide ready to use components, but provide the logic and accessibility for you to create your own components, where you have complete control over the styling.

Melt UI is a low level API for creating your own components. It’s probably my favorite, but it can be intense if you need a quick, and simple component. Their code examples provide regular CSS styles and Tailwind CSS versions you can use.

example.svelte
<script lang="ts">
	import { createSelect, melt } from '@melt-ui/svelte'

	const fruits = [
		{ value: '🍎', label: 'Apple' },
		{ value: '🍌', label: 'Banana' },
		{ value: '🍊', label: 'Orange' },
		{ value: '🍐', label: 'Pear' },
	]

	const {
		elements: { trigger, menu, option },
		states: { selectedLabel, open },
	} = createSelect()
</script>

<div>
	<button use:melt={$trigger}>
		{$selectedLabel || 'Select a fruit'}
	</button>

	{#if $open}
		<div use:melt={$menu}>
			{#each fruits as fruit}
				<div use:melt={$option({ ...fruit })}>
					{fruit.value}
				</div>
			{/each}
		</div>
	{/if}
</div>

Bits UI uses Melt UI as the base, so it’s accessible, customizable, and includes a lot of components. It’s simple to use, and you can use regular CSS, or Tailwind CSS to style the components.

example.svelte
<script lang="ts">
	import { Select } from 'bits-ui'

	const fruits = [
		{ value: '🍎', label: 'Apple' },
		{ value: '🍌', label: 'Banana' },
		{ value: '🍊', label: 'Orange' },
		{ value: '🍐', label: 'Pear' },
	]
</script>

<Select.Root items={fruits}>
	<Select.Trigger>
		<Select.Value placeholder="Select a fruit" />
	</Select.Trigger>

	<Select.Content>
		{#each fruits as fruit}
			<Select.Item value={fruit.value} label={fruit.label}>
				{fruit.label}
			</Select.Item>
		{/each}
	</Select.Content>
</Select.Root>

Tailwind CSS Libraries

These Svelte UI libraries use the utility-first CSS framework Tailwind for styling, and provide functional, and accessible components.

Skeleton UI is a UI toolkit for Svelte that comes with premade components and utilities. It has great docs, themes, including a theme generator, and a Figma design kit. I would love to see more component variety.

example.svelte
<script lang="ts">
	import { AppShell } from '@skeletonlabs/skeleton'
</script>

<AppShell>
	<svelte:fragment slot="header">Header</svelte:fragment>
	<svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment>
	<slot />
	<svelte:fragment slot="pageFooter">Page Footer</svelte:fragment>
</AppShell>

Flowbite Svelte is opinionated but customizable, has great docs, RTL support, and comes with a lot of easy to use components. Some components seem to use native elements making the design look less cohesive, but it’s simple to use.

example.svelte
<script lang="ts">
	import { Select, Label } from 'flowbite-svelte'

	let selected: string

	const fruits = [
		{ value: '🍎', name: 'Apple' },
		{ value: '🍌', name: 'Banana' },
		{ value: '🍊', name: 'Orange' },
		{ value: '🍐', name: 'Pear' },
	]
</script>

<Label>
	Select a fruit
	<Select items={fruits} bind:value={selected} />
</Label>

shadcn-svelte is an unofficial Svelte port of shadcn/ui and it’s unlike any other UI library because it’s not a library, but a collection of reusable components that you can copy and paste, or use the CLI to add to your apps, where the styles are separate from the implementation which is genius but some people raise valid concerns about updates.

example.svelte
<script lang="ts">
	import * as Select from '$lib/components/ui/select'

	const fruits = [
		{ value: '🍎', label: 'Apple' },
		{ value: '🍌', label: 'Banana' },
		{ value: '🍊', label: 'Orange' },
		{ value: '🍐', label: 'Pear' },
	]
</script>

<Select.Root>
	<Select.Trigger>
		<Select.Value placeholder="Select a fruit" />
	</Select.Trigger>
	<Select.Content>
		<Select.Group>
			{#each fruits as fruit}
				<Select.Item value={fruit.value} label={fruit.label}>
					{fruit.label}
				</Select.Item>
			{/each}
		</Select.Group>
	</Select.Content>
</Select.Root>

Material Design Libraries

Svelte UI libraries using Material Design:

Bootstrap Libraries

Svelte UI libraries using Bootstrap design:

Framework Agnostic Libraries

These are some lovely framework agnostic UI libraries:

Other UI/UX Libraries

Interesting Svelte UI libraries that have potential, or don’t fit into a specific category:

Support

You can subscribe on YouTube, or consider becoming a patron if you want to support my work.

Patreon
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub