Laravel

Set up Tabler in Laravel with Vite and build a first working page.

Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box - no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.

This guide uses Laravel's default Vite setup. You will install @tabler/core, wire the CSS and JS into your Vite entry files, and render a first Blade view 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 do not want a Node-based build step:

<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

In a standard Laravel setup, import Tabler CSS in resources/css/app.css:

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

For full theme customization, you can import SCSS sources from the package:

@use '@tabler/core/scss/tabler';

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it in resources/js/app.js:

import '@tabler/core/dist/js/tabler.min.js'

Laravel-specific note: keep Tabler imports in Vite entry files (resources/css/app.css and resources/js/app.js) so they are compiled into your application bundles.

Minimal working example

First, load compiled assets in your base Blade layout (for example resources/views/layouts/app.blade.php):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite(["resources/css/app.css", "resources/js/app.js"])
  </head>
  <body>
    @yield("content")
  </body>
</html>

Then create a simple page route in routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get("/", function () {
    return view("welcome");
});

Then add a small Tabler layout with one card in resources/views/welcome.blade.php:

@extends("layouts.app")

@section("content")
<div class="page">
  <div class="page-wrapper">
    <div class="container-xl py-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Laravel + Tabler</h3>
          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

Run the dev server and Vite:

php artisan serve
npm run dev

Open the local URL from php artisan serve 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