# Astro
> Set up Tabler in Astro and build a first working page.
Install Tabler in Astro - import the CSS, load the client-side JavaScript, and render a minimal page layout with a Tabler card.
Source: https://docs.tabler.io/ui/getting-started/frameworks/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
### 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
```
### 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
@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 `
```
### 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'
---
Astro + Tabler
```
Then add a minimal page in `src/pages/index.astro`:
```astro
---
import Layout from '../layouts/Layout.astro'
---
Astro + Tabler
Your Tabler setup is working.
```
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.