# SvelteKit

> Set up Tabler in SvelteKit and build a first working page.

Install Tabler in SvelteKit - import the CSS, load the JS on the client, and render a minimal page layout with a Tabler card.

Source: https://docs.tabler.io/ui/getting-started/frameworks/sveltekit

---

Svelte components compile to plain HTML and Tabler provides the styling on top. The only SvelteKit-specific step is loading `tabler.min.js` on the client, since pages render on the server first.

You will install `@tabler/core`, import its CSS globally, load the JavaScript from `onMount`, and render a first page with a Tabler card.

## Setup

### Install Tabler package

Install `@tabler/core` with your preferred package manager:

```shell
npm install @tabler/core
yarn add @tabler/core
pnpm install @tabler/core
bun install @tabler/core
```

You can also use CDN files when you need a quick setup:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/js/tabler.min.js"></script>
```

### Import styles

Import Tabler CSS once in your global stylesheet (`src/app.css`):

```scss
@import '@tabler/core/dist/css/tabler.min.css';
```

For full theme customization, import SCSS sources instead:

```scss
@use '@tabler/core/scss/tabler';
```

### Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

In SvelteKit, load `tabler.min.js` only on the client. `onMount` runs only in the browser, so a dynamic import inside it never executes during SSR:

```html
<script>
  import { onMount } from "svelte";
  onMount(() => {
    import("@tabler/core/dist/js/tabler.min.js");
  });
</script>
```

SvelteKit-specific note: `tabler.min.js` accesses `document`, so importing it during SSR can cause `document is not defined`.

### Minimal working example

Create a simple `src/routes/+layout.svelte` that loads global styles and Tabler JavaScript:

```html
<script>
  import { onMount } from "svelte";
  import "../app.css";
  onMount(() => {
    import("@tabler/core/dist/js/tabler.min.js");
  });
</script>
<slot />
```

Then add a minimal page in `src/routes/+page.svelte`:

```html
<div class="page">
  <div class="page-wrapper">
    <div class="container-xl py-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">SvelteKit + Tabler</h3>
          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

Run the app:

```shell
npm run dev
```

Open the local SvelteKit URL and confirm the card is styled with Tabler.

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.