List Of Svelte UI Libraries

Table of Contents

• Headless Libraries
• Tailwind CSS Libraries
• Material Design Libraries
• Bootstrap Libraries
• Framework Agnostic Libraries
• Other UI/UX Libraries

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.

<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.

<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.

<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.

<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.

<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:

• Smelte
• Svelte Material UI

Bootstrap Libraries

Svelte UI libraries using Bootstrap design:

• Sveltestrap
• AgnosUI

Framework Agnostic Libraries

These are some lovely framework agnostic UI libraries:

• daisyUI (Tailwind CSS)
• Open Props (like Tailwind but uses CSS variables)
• Pico (minimal CSS framework)
• Preline (Tailwind CSS)
• Shoelace (web components)

Other UI/UX Libraries

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

• Attractions (UI kit)
• Carbon Components (Carbon design system)
• Grail UI (Headless)
• Kahi UI (rapid prototyping)
• STDF (Mobile component library based on Svelte and Tailwind)
• STWUI (Tailwind CSS)
• SVAR Svelte Core (20+ Svelte UI components and form controls)
• Svelte Atoms (Atol design)
• Svelte Headless UI (Headless)
• Svelte UX (Collection of components, actions, stores, and utilities)
• SvelteUI (Mantine UI design system)
• YeSvelte (flexible and powerful Svelte UI library)