Now Ui Dashboard Laravel Package

Getting Started

What it is: a one-shot scaffolder, not a runtime dependency. It copies the Creative Tim Now UI Dashboard (Bootstrap 4) theme into a Laravel app — auth views, an authenticated dashboard layout, sidebar/navbar partials, and the compiled CSS/JS/font assets. After running it, the generated files are yours; the package's job is done.

Minimal path (fresh app):

composer require laravel-frontend-presets/now-ui-dashboard
php artisan preset now-ui-dashboard   # check `php artisan list | grep preset` first
npm install && npm run dev
php artisan migrate
php artisan serve

If preset isn't registered on your Laravel version, read the package README and src/ — the command name and publish mechanism changed over the project's life (see Gotchas).

Look here first, in this order:

1. src/ in the vendor package — the preset command and its stubs/ directory tell you exactly which files will be overwritten before you run it.
2. resources/views/layouts/app.blade.php — the master layout; every page you build extends this.
3. resources/views/home.blade.php — the canonical example of a dashboard page (cards, rows, chart markup).
4. resources/views/layouts/ partials — navbar, sidebar, footer. This is where navigation lives.
5. resources/sass/ and resources/js/bootstrap.js — theme variables and plugin bootstrapping (jQuery, Bootstrap, Popper, Chart.js).
6. routes/web.php — the preset adds the auth routes and the /home dashboard route.

First use case: stand up a working admin area — login, registration, password reset, email verification views, and a sidebar dashboard — in about fifteen minutes, then start replacing the demo widgets with real data. It's the right tool when you need "an internal tool that looks designed" and don't want to spend a sprint on layout.

Implementation Patterns

Page-per-view with the shared layout. Every screen is a Blade file that extends the layout and fills a content section. Follow the shape of home.blade.php:

@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header"><h5 class="title">Recent Orders</h5></div>
            <div class="card-body">
                @foreach ($orders as $order)
                    <div class="d-flex justify-content-between border-bottom py-2">
                        <span>{{ $order->reference }}</span>
                        <span class="text-muted">{{ $order->created_at->diffForHumans() }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

Navigation is hand-edited Blade, not a menu builder. Add entries directly in the sidebar partial. Active state is explicit — there's no route-to-menu magic, so use request()->routeIs():

<li class="{{ request()->routeIs('orders.*') ? 'active' : '' }}">
    <a href="{{ route('orders.index') }}">
        <i class="now-ui-icons shopping_box"></i>
        <p>Orders</p>
    </a>
</li>

Extract your own components early. The theme's card/stat markup is verbose and repeated. Wrap it once:

{{-- resources/views/components/stat.blade.php --}}
<div class="card card-stats">
    <div class="card-body">
        <div class="row">
            <div class="col-5"><div class="icon-big text-center icon-primary"><i class="now-ui-icons {{ $icon }}"></i></div></div>
            <div class="col-7"><div class="numbers"><p class="card-category">{{ $label }}</p><h4 class="card-title">{{ $value }}</h4></div></div>
        </div>
    </div>
</div>

Then <x-stat icon="business_briefcase-24" label="Open Tickets" :value="$open" />. This is the single highest-leverage move for day-to-day speed — you get theme fidelity with one line per widget.

Scripts per page. Demo charts/datepickers are initialized inline in the demo views. Rather than duplicating script tags, add @stack('scripts') before </body> in the layout once, then:

@push('scripts')
<script>
new Chart(document.getElementById('salesChart'), { type: 'line', data: @json($chart), options: { maintainAspectRatio: false } });
</script>
@endpush

Keep the demo pages until you don't need them. home.blade.php is effectively your component gallery — copy snippets out of it (tables, progress bars, notification dropdowns, sweetalert confirms) rather than reverse-engineering the theme's CSS.

Auth customization in place. The preset copies login/register/reset/verify views into resources/views/auth. Edit them directly and commit them; there's nothing to re-publish. Add fields to registration by editing both the Blade form and the generated RegisterController (or your Fortify/Breeze equivalent if you're retrofitting).

Retrofit pattern (recommended for existing apps). On Laravel 8+, the preset command may not run cleanly. Instead: run it in a throwaway Laravel app, then copy resources/views/layouts, resources/views/auth, the public/ assets, and the relevant SCSS imports into your real app. You keep full control and avoid clobbering your routes/web.php and package.json.

Use it as a design reference, not a dependency. Because the output is static files, the healthy long-term pattern is: scaffold once → commit everything → composer remove laravel-frontend-presets/now-ui-dashboard. The package then documents itself via your git history.

Gotchas and Tips

The preset command is a moving target. Laravel 6/7 removed the core PresetCommand; Laravel 9+ replaced Mix with Vite, and 10/11 changed the default app skeleton substantially. Version compatibility here is the #1 failure mode — check the package's composer.json (illuminate/support constraint) and src/ before assuming the documented command exists. When in doubt, scaffold in a matching-version skeleton app and copy files across.

It overwrites files. resources/views, resources/js, resources/sass, routes/web.php, and package.json scripts are all in scope. Never run it on a repository with uncommitted work. Best practice: fresh app, first commit, then preset, so the diff is reviewable.

Don't mix it with Breeze/Jetstream/Tailwind. You'll end up with two auth stacks, two CSS pipelines, and a @vite directive fighting mix(). Pick one. If you've already installed Breeze, remove its views and routes first.

Mix vs Vite is the main integration friction. The theme expects jQuery as a global (window.$ = window.jQuery = require('jquery')) because the Now UI plugins attach to it. If your app uses Vite, either keep the Mix pipeline for the theme assets or port carefully: import $ from 'jquery'; window.$ = window.jQuery = $; in resources/js/app.js, import the theme CSS at the top of app.css, and copy static assets into public/ (Vite won't fingerprint files referenced by hardcoded paths in the theme CSS).

Missing assets = missing fonts. The now-ui-icons icon font must land in public/fonts (or wherever the CSS's @font-face points). If icons render as boxes, the CSS copied but the font binaries didn't. Same for public/img placeholders in the navbar/profile.

Pagination renders as plain links. Laravel's default paginator views expect Tailwind in recent versions. Add to AppServiceProvider::boot():

use Illuminate\Pagination\Paginator;
Paginator::useBootstrap();

Layout edits appear to do nothing. Standard Blade caching: php artisan view:clear. Add npm run watch to your dev loop — the theme's CSS is compiled from SCSS, so editing resources/sass/ without recompiling looks like a no-op.

Sidebar and plugin behavior depends on markup structure. perfect-scrollbar and the sidebar toggle are initialized by the theme JS against specific class names (.main-panel, .sidebar, .wrapper). If you extract the layout into your own shell and drop a wrapper div, the mobile collapse and scrollbars break silently. Diff your layout against the original when something stops responding.

Charts need explicit height. Chart.js in a card with maintainAspectRatio: false collapses to zero height without a CSS height on the canvas container. The demo pages do this correctly — copy their wrapper markup.

Demo pages rely on sweetalert2. If you prune package.json dependencies to slim the bundle, delete confirms start failing. Either keep it or systematically replace the demo delete handlers with native confirm() / your own modal.

SCSS customization: override variables, don't edit the vendor file. Add your brand colors and radii in resources/sass/_variables.scss (or a new partial imported before the theme) so a theme re-scaffold doesn't erase your work.

Maintenance posture. 223 stars, small org, last release Nov 2024 — treat it as a starter kit, not infrastructure. Reasonable bet for an internal dashboard or prototype; risky as a long-lived dependency in a product you'll maintain for years. Since it has zero dependents and no upgrade path for copied files, plan on owning the output from day one.