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 ( It contains fully accessible, feature-rich, unstyled UI components. It's still young but it's the only option providing unstyled components for Svelte.


    • 10+ components
  • Attractions

    Screenshot of Attractions

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


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


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


    • 30+ components
  • Skeleton

    Screenshot of Skeleton

    Skeleton allows you to create adaptive and accessible components with both Svelte and Tailwind. Currently only available for SvelteKit.


    • ~30 components



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

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.

Try for free