uppy/docs/framework-integrations/svelte.mdx

---
slug: /svelte
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Svelte

[Svelte][] components for the Uppy UI plugins.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/svelte
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/svelte
```

  </TabItem>
</Tabs>

:::note

You also need to install the UI plugin you want to use. For instance,
`@uppy/dashboard`.

:::

## Use

The following plugins are available as Svelte component wrappers:

- `<Dashboard />` renders [`@uppy/dashboard`](/docs/dashboard)
- `<DragDrop />` renders [`@uppy/drag-drop`](/docs/drag-drop)
- `<ProgressBar />` renders [`@uppy/progress-bar`](/docs/progress-bar)
- `<StatusBar />` renders [`@uppy/status-bar`](/docs/status-bar)

Instead of adding a UI plugin to an Uppy instance with `.use()`, the Uppy
instance can be passed into components as an `uppy` prop. Due to the way Svelte
handles reactivity, you can initialize Uppy the same way you would with vanilla
JavaScript.

```html
<script>
	import { Dashboard } from '@uppy/svelte';
	import Uppy from '@uppy/core';
	import Webcam from '@uppy/webcam';

	// Don't forget the CSS: core and UI components + plugins you are using
	import '@uppy/core/dist/style.css';
	import '@uppy/dashboard/dist/style.css';
	import '@uppy/webcam/dist/style.css';

	const uppy = new Uppy().use(Webcam);
</script>

<main><Dashboard uppy={uppy} plugins={["Webcam"]} /></main>
```

[svelte]: https://svelte.dev