Installation

Start with an app using Svelte 5.33 or newer.

Install the Packages

npm install @ui-sdk/svelte @ui-sdk/core

@ui-sdk/svelte provides the Svelte components. @ui-sdk/core provides their behavior and is a peer dependency. Install both so the components and any helpers you use share one copy of the core.

Import a Component

Import each component from its own entry:

<script lang="ts">
  import { Button } from "@ui-sdk/svelte/button"
  import { Toggle } from "@ui-sdk/svelte/toggle"
</script>

A Dialog has separate parts for its trigger, content, and title. Import those parts from the same entry:

<script lang="ts">
  import {
    Dialog,
    DialogContent,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
</script>

Each component page lists the parts you can use.

Add Your Styles

Components are unstyled, so you style them with your app's CSS or with Tailwind CSS. Styling and Animation covers both.

You can render your first component without setting up a provider, importing a UI SDK stylesheet, or adding a portal root. SvelteKit can render the initial HTML on the server; Server Rendering explains how to keep it consistent when the page hydrates.

Right to Left

Set dir="rtl" on the page or a container. Arrow keys and popup placement follow that direction without a provider. Use logical CSS properties, such as padding-inline-start, for your styles.

Continue with First Component to add a working toggle to your app.