Accessible Svelte 5 components, themed by tokens.

59 components for Svelte and SvelteKit, from buttons and inputs to navigation and sidebars. Keyboard support, typed props and light and dark themes come built in.

Browse components Read the docs
npm install zabi-components
  • 59 components
  • v8.0.0
  • MIT licensed
  • SSR-safe
  • Tokens contrast-checked in CI

Needs Svelte 5.43.8 or newer and Tailwind CSS v4.

Invite a teammate

A working form, assembled from the library.

Role
60%

Small parts that add up to whole screens.

Three layers, so you can start as small as you like. Take a single button, or drop in a complete sidebar already built from those same buttons.

See every component with props and examples

  1. Atoms

    29 components

    Single controls and text: buttons, inputs, checkboxes, badges, progress bars and tooltips.

  2. Molecules

    25 components

    Atoms combined into patterns: form fields, dropdowns, tabs, modals, alerts and toasts.

  3. Organisms

    5 components

    Whole regions of an app: a top navigation bar and a sidebar with search and an account panel.

Change a few tokens. Every component follows.

Components never hardcode a color. They read semantic tokens like action-primary and focus-ring, so your brand goes in one place: globally, or scoped to a single section.

Each token has a dark value too, so the switch in the top bar re-themes this whole page.

Accent

Theming guide
64%
/* Iris is the default theme. Nothing to override. */

The details you would otherwise write yourself.

Labels and messages
Input, Textarea and Select connect labels, hints and errors to the control, so screen readers read them together.
Keyboard
RadioGroup moves with the arrow keys, and Dropdown handles arrows, Home, End and Escape, so the keyboard work that is easy to skip is already done.
Focus
Modal keeps focus inside while open and returns it to the button that opened it, even when modals are nested.
Server rendering
Components render in SvelteKit on the server. Browser-only APIs are guarded so pages hydrate cleanly.
Types
Props are typed with TypeScript, so your editor suggests variants, sizes and callbacks as you write.
Dark mode
Every color token has a dark value. Add the dark class to the html element and the whole interface follows.

Running in three steps.

Import the theme CSS once in your global stylesheet. That is what gives the token classes their values.

  1. Install the package

    npm install zabi-components

  2. Import the theme in your global CSS

    @import "tailwindcss";
@import "zabi-components/theme-only";
@import "zabi-components/theme-dark-only";

  3. Use a component

    <script lang="ts">
  import { Button, Input } from "zabi-components";
  let name = $state("");
</script>

<Input label="Name" bind:value={name} />
<Button onclick={() => console.log(name)}>Save</Button>

Start with one component.

Every component page lists its props and variants, with examples you can copy into your app.

Browse components View on GitHub (opens in a new tab)