# Installation

Install UI SDK in your Svelte app.

Start with an app using Svelte 5.33 or newer.

## Install the Packages

```bash
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:

```svelte
<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:

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

Each [component page](/docs/svelte/components) 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](/docs/svelte/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](/docs/svelte/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](/docs/svelte/first-component) to add a working toggle to your app.