Introducing Ark UI Svelte

From the onset, Ark UI supported React, Solid and Vue. Today, we're excited to announce that Ark UI now officially supports Svelte! 🎉

This means you can now build accessible, scalable design systems using the 45+ components in Ark UI, while keeping that reactive Svelte experience you already love ($state, $derived, $effect, you get the gist!).

Why Svelte?

Svelte has become a go-to for developers who care about speed and minimal overhead. That lines up perfectly with how Ark UI is built - totally unopinionated. In other words, you get all the complex accessibility logic handled for you, while maintaining complete control over styling and behavior.

Getting Started

Note: Ark UI only works for Svelte 5 apps and design systems.

To get started with Ark UI, install the @ark-ui/svelte package directly via your package manager:

npm i @ark-ui/svelte
# or
yarn add @ark-ui/svelte
# or
pnpm add @ark-ui/svelte

Quick Demo

Here's a quick example of how to use Slider component in Svelte:

<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'

  let value = $state(0)
</script>

<Slider.Root bind:value>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

Want to see it in action? Check out the Stackblitz demo.

Conclusion

There are already 45+ components available in Ark UI, so whether you're building a product or a design system, you can now ship Svelte apps faster!

Explore Svelte in Ark UI now: ark-ui.com

We can't wait to see what you build with it!