Best Svelte component libraries for Design Systems

The component libraries on this list are accessible and can be styled to match your brand and your design tokens.

Accessibility mandatory
Customisable style
  • svelte-headlessui

    Screenshot of svelte-headlessui

    `svelte-headlessui` is an unofficial, complete port of the Headless UI React component library (https://headlessui.dev/). It contains fully accessible, feature-rich, unstyled UI components. It's still young but it's the only option providing unstyled components for Svelte.

    Features

    • 10+ components
  • Attractions

    Screenshot of Attractions

    "A pretty cool UI kit for Svelte." Attractions provides accessible components that are customizable through Sass.

    Features

    • 30+ components
  • Carbon Components Svelte

    Screenshot of Carbon Components Svelte

    Carbon Components Svelte implements the IBM's Carbon Design System. Fully themable. Themes can be switched at run-time to also provide dark/light/contrast modes.

    Features

    • 50+ components
  • Svelte Material UI

    Screenshot of Svelte Material UI

    Also known as SMUI. SMUI is based on Material Design Components for Web, by Google. Themable through a few set of Sass variables.

    Features

    • 30+ components

Mentions

svelterial / Svelte Materialify

svelterial will soon replace Svelte Materialify.

Smelte

Smelte is an interesting component library using Tailwindcss but has inferior accessibility keyboard support.