SvelteKit

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

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:

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:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>

Import styles

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

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

For full theme customization, import SCSS sources instead:

@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:

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

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

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

npm run dev

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

Next steps

Continue with Customize to adjust styles and build setup.
Explore Layout to choose page structures.
Browse Components to add UI building blocks.

Menu