self-dev

Posted on Apr 1

I Ported audio-ui (shadcn / React) to Svelte — Here’s What I Learned

#webdev #svelte #shadcn #opensource

Recently, I’ve been exploring how far the headless + composable UI philosophy can go outside the React ecosystem.

So I decided to take on a small challenge:
👉 porting audio-ui (originally built for shadcn / React) into Svelte.

Demo: svelte-audio-ui
Github : github.com/ddtamn/svelte-audio-ui

Why This Exists

In the React world, tools like shadcn have made it very natural to:

copy components directly into your codebase
fully control the implementation
build systems that are easy to extend

But in Svelte, especially for audio-related UI, there aren’t many solutions that follow this approach.

Most libraries are:

too opinionated
not composable
or difficult to extend

So the goal here is simple:

Bring the same “you own the code” philosophy into Svelte, specifically for audio UI.

Core Idea

Instead of shipping a package, this approach follows the same pattern as shadcn:

No npm dependency
Components are installed into your project
You can modify everything

At the center of it is:

`AudioProvider`

This acts as the core engine that handles:

playback state
queue management
synchronization between components

Everything else — player, controls, sliders — composes on top of it.

Example

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player";
</script>

<AudioPlayer.Root>
  <AudioPlayer.ControlBar>
    <AudioPlayer.Play />
    <AudioPlayer.SeekBar />
    <AudioPlayer.Volume />
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

This pattern allows you to:

swap components easily
extend behavior
or build your own UI layer entirely

Built for the Svelte Way

Porting wasn’t about copying code.

The goal was to make it feel idiomatic in Svelte:

leveraging reactivity instead of hooks
simplifying state flow
keeping components lightweight

AI-Ready Documentation

One interesting aspect of this project is how it works with AI tools.

Since everything lives inside your codebase:

structure is predictable
patterns are consistent
components are easy to extend

The docs also include:

llms.txt
llms-full.txt

This makes it easier for AI tools to:

understand the system
generate new components
help you iterate faster

Extras: Particles

There’s also a particles section for visual experiments.

It’s not core to the system, but it’s fun to explore and can be used for landing pages or creative UI.

What’s Next

This is still early.

Next steps:

refine API to feel more “Svelte-native”
improve developer experience
add more components as needed

Final Thoughts

Open source is interesting like this.

You don’t always need to reinvent ideas — sometimes you just need to translate them properly into another ecosystem.

If you’re using Svelte:

would this be useful for you?
what kind of audio components do you usually need?

Would love to hear your thoughts 🙏

DEV Community