Next.js

Set up Tabler in Next.js and build a first working page.

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:

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 your global stylesheet (app/globals.css):

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

For full theme customization, import SCSS sources:

@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):

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

import './globals.css'
import { TablerScripts } from './tabler-scripts'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TablerScripts />
        {children}
      </body>
    </html>
  )
}

app/page.jsx:

export default function Page() {
  return (
    <div className="page">
      <div className="page-wrapper">
        <div className="container-xl py-4">
          <div className="card">
            <div className="card-body">
              <h3 className="card-title">Next.js + Tabler</h3>
              <p className="text-secondary mb-0">Your Tabler setup is working.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Run the app:

npm run dev

Open the local Next.js 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