--- title: Next.js order: 3 summary: Set up Tabler in Next.js and build a first working page. description: Install Tabler in Next.js - import the CSS globally, load the JS on the client, and render a minimal page with a Tabler card. icon: brand-nextjs seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, and render a minimal page layout with a Tabler card. --- import TabsPackage from '@components/TabsPackage.astro' import CdnImportPackage from '@components/CdnImportPackage.astro' import Steps from '@components/Steps.astro' 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: You can also use CDN files when you need a quick setup: ### 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 @import '@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.