mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
110 lines
2.9 KiB
Plaintext
110 lines
2.9 KiB
Plaintext
---
|
|
title: SvelteKit
|
|
order: 10
|
|
summary: Set up Tabler in SvelteKit and build a first working page.
|
|
description: Install Tabler in SvelteKit - import the CSS, load the JS on the client, and render a minimal page layout with a Tabler card.
|
|
icon: brand-svelte
|
|
seoDescription: Install `@tabler/core`, import CSS and optional JS in SvelteKit, and render a minimal page layout with a Tabler card.
|
|
---
|
|
|
|
import TabsPackage from '@components/TabsPackage.astro'
|
|
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
|
import Steps from '@components/Steps.astro'
|
|
|
|
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
|
|
|
|
<Steps>
|
|
|
|
### Install Tabler package
|
|
|
|
Install `@tabler/core` with your preferred package manager:
|
|
|
|
<TabsPackage name="@tabler/core" />
|
|
|
|
You can also use CDN files when you need a quick setup:
|
|
|
|
<CdnImportPackage />
|
|
|
|
### 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
|
|
@import '@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.
|
|
|
|
</Steps>
|