Astro

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

Astro ships zero JavaScript by default, which suits Tabler well: most components are pure CSS, and the interactive ones need just one script that Astro bundles and runs only in the browser.

You will install @tabler/core, import its CSS in a base layout, add the client script, 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 the frontmatter of your base layout (src/layouts/Layout.astro):

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.

Astro-specific note: a plain <script> tag in an Astro component is bundled and runs only in the browser, so importing tabler.min.js there is safe - it never executes during server-side rendering:

<script>
  import '@tabler/core/dist/js/tabler.min.js'
</script>

Minimal working example

Create a base layout in src/layouts/Layout.astro that loads Tabler CSS and JavaScript:

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Astro + Tabler</title>
  </head>
  <body>
    <slot />
    <script>
      import '@tabler/core/dist/js/tabler.min.js'
    </script>
  </body>
</html>

Then add a minimal page in src/pages/index.astro:

---
import Layout from '../layouts/Layout.astro'
---

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

Run the app:

npm run dev

Open the local Astro 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