Headless components for Svelte

Build accessible Svelte UIs without fighting design constraints

UI Ingredients gives you unstyled, behavior-rich components so you can create a design system that matches your product.

Accessible by default 40+ components Svelte-first primitives

Headless & composable

Build your own UI layer using flexible parts, snippets, and composition patterns.

Accessibility-first

Components are powered by robust interaction logic with keyboard and screen reader support.

Styling freedom

Use utility classes, CSS modules, or vanilla CSS with data attributes and state selectors.

Start with a few lines

Install the package, compose primitives, and style your own way using Tailwind, CSS, or any design token system.

npm install ui-ingredients

import {Dialog, Portal} from 'ui-ingredients';

<Dialog.Root>...</Dialog.Root>