Skip to content
Svelte ᚱᚢᚾᛁᚨ
Svelte 5 ready using Runes!

ᚱ
ᚢ
ᚾ
ᛁ
ᚨ
R
U
N
I
A

Your Mystical UI Library

Next-generation Svelte components. Accessible, Style-free, and Runic!
Introduction
Explore components

Accordion

View docs

Radio Group

View docs

Many more...

See the component docs for more examples

View docs

Getting started is easy as

1

Install the package
npm install @niklasburggraaff/svelte-runia

2

Import and use a component
MyComponent.svelte
<script lang="ts">
    import { Accordion } from "@niklasburggraaff/svelte-runia";
</script>


<Accordion.Root type="single">
    <Accordion.Item value="item-1">
        <Accordion.Header level={3}>
            <Accordion.Trigger>Item 1</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Lorem ipsum</Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="item-2">
        <Accordion.Header level={3}>
            <Accordion.Trigger>Item 2</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Lorem ipsum</Accordion.Content>
    </Accordion.Item>
</Accordion.Root>

3

Add your styles
MyComponent.svelte
<script lang="ts">
    import { Accordion } from "@niklasburggraaff/svelte-runia";
</script>


<Accordion.Root type="single">
    <Accordion.Item value="item-1" class="border-b">
        <Accordion.Header level={3}>
            <Accordion.Trigger class="w-full bg-transparent py-2 text-xl">Item 1</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Lorem ipsum</Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="item-2" class="border-b">
        <Accordion.Header level={3}>
            <Accordion.Trigger class="w-full bg-transparent py-2 text-xl">Item 2</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Lorem ipsum</Accordion.Content>
    </Accordion.Item>
</Accordion.Root>

Want to learn more?

Read The Friendly Manual

Source code

Package