docs/pages/ui/getting-started/frameworks/astro.mdx - dev - githubmirror/tabler

docs/pages/ui/getting-started/frameworks/astro.mdx
121 строка3 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Astro
order: 11
summary: Set up Tabler in Astro and build a first working page.
description: Install Tabler in Astro - import the CSS, load the client-side JavaScript, and render a minimal page layout with a Tabler card.
icon: brand-astro
seoDescription: Install `@tabler/core`, import CSS and client-side JS in Astro, and render a minimal page layout with a Tabler card.
layout: '@layouts/DocsMdxLayout.astro'
---

import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'

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

<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 the frontmatter of your base layout (`src/layouts/Layout.astro`):

```js
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.

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:

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

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

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

```shell
npm run dev
```

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