Customising

Everything the installer published is application code, so the first answer to "how do I change X" is "edit the file". The config keys below cover the changes you should not need a view edit for.

Brand

// config/ui-kit.php
'brand' => [
    'name' => env('UI_KIT_BRAND_NAME', config('app.name')),
    'logo' => env('UI_KIT_BRAND_LOGO', '/images/logo.png'),
    'home_route' => env('UI_KIT_HOME_ROUTE', 'home'),
],

Drop a logo at public/images/logo.png, or point UI_KIT_BRAND_LOGO anywhere, a full URL included. Until a logo exists the layouts render an initial badge, so a fresh install never looks broken. home_route names the route used for "back to site" links and post-login redirects; when that route does not exist the kit falls back to /.

Auth page copy

Each auth page reads its heading and subheading from config/ui-kit.php under copy: login, register, forgot_password, reset_password, verify_email and confirm_password. Change the words there rather than in the Volt pages.

features.disposable_email_block toggles the disposable-domain check on registration.

// config/admin.php
'nav' => [
    ['label' => 'Dashboard', 'route' => 'admin.dashboard', 'icon' => 'grid'],
    ['label' => 'Users', 'route' => 'admin.users.index', 'icon' => 'users'],
    ['section' => 'Support'],
    ['label' => 'Tickets', 'route' => 'admin.support.index', 'icon' => 'ticket', 'badge' => 'open_tickets'],
    /* ui-kit:nav-start */
    /* ui-kit:nav-end */
],

An entry is either a link, with label, route, icon and an optional badge, or a section divider. icon is a key in resources/views/layouts/partials/nav-icons.blade.php, where you add your own SVGs. Keep the two marker comments: modules append their entries between them, idempotently, and never touch the entries outside.

A badge key on a nav entry shows a counter. The default resolver returns nothing, so bind your own in a service provider:

$this->app->bind(
    \Shipbytes\UiKit\Contracts\SidebarBadgeResolver::class,
    \App\Support\AdminBadgeResolver::class,
);

The resolver returns an array keyed by badge name, for example ['open_tickets' => 12, 'unread_contacts' => 3].

Route prefix and middleware

// config/admin.php
'route_prefix' => 'admin',
'route_name_prefix' => 'admin.',
'middleware' => ['auth', 'verified', \Shipbytes\UiKit\Http\Middleware\EnsureIsAdminFallback::class],

Change the prefix to move the whole panel. The middleware list applies to every admin route; the admin-middleware module replaces the fallback with a role check when it installs.

Theme tokens

The tokens are a Tailwind v4 @theme block in resources/css/ui-kit-theme.css. Override any of them after the import in app.css:

@import 'tailwindcss';
@import './ui-kit.css';

@theme {
  --color-brand-500: #0d9488;
}

Dark mode is a dark class on <html>, toggled by <x-theme-toggle /> and persisted in localStorage. The no-flash snippet in <x-ui-kit::head /> applies it before the first paint.

Rate limiters

The service provider registers login and two-factor limiters only when your app has not already defined them, so define yours in AppServiceProvider::boot() to take over.

Overriding published views

The views, Livewire components, models and migrations in your app are the originals, not overrides. Edit them. If you want the kit's current version of a file back, re-publish its tag with --force:

php artisan vendor:publish --tag=ui-kit-views --force

The tags are ui-kit-config, ui-kit-views, ui-kit-livewire, ui-kit-assets, ui-kit-routes and ui-kit-migrations. Upgrading covers how to do that without losing your changes.

Was this page helpful?