# Next.js
> Set up Tabler in Next.js and build a first working page.
Install Tabler in Next.js - import the CSS globally, load the JS on the client, and render a minimal page with a Tabler card.
Source: https://docs.tabler.io/ui/getting-started/frameworks/nextjs
---
Next.js renders on the server first, which is great for performance but means browser-only code needs care: Tabler CSS can be imported globally, while `tabler.min.js` must load on the client. This guide shows an App Router pattern that handles both cleanly.
You will install `@tabler/core`, add its CSS to your global stylesheet, mount a small client component for Tabler JavaScript, 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 your global stylesheet (`app/globals.css`):
```scss
@import '@tabler/core/dist/css/tabler.min.css';
```
For full theme customization, import SCSS sources:
```scss
@use '@tabler/core/scss/tabler';
```
### Import and initialize JavaScript
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
Next.js-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Next.js throws `document is not defined`.
Use a client component and dynamic import (`app/tabler-scripts.jsx`):
```jsx
'use client'
import { useEffect } from 'react'
export function TablerScripts() {
useEffect(() => {
import('@tabler/core/dist/js/tabler.min.js')
}, [])
return null
}
```
### Minimal working example
Load styles globally and mount client-only scripts in the app layout.
`app/layout.jsx`:
```jsx
import './globals.css'
import { TablerScripts } from './tabler-scripts'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
`app/page.jsx`:
```jsx
export default function Page() {
return (
Next.js + Tabler
Your Tabler setup is working.
)
}
```
Run the app:
```shell
npm run dev
```
Open the local Next.js 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.