NEW Production-ready & Laravel-friendly

A calm, clear design system for modern web apps.

Pajak is an opinionated UI kit for dashboards, SaaS products and admin tools. Composable Blade components, accessible defaults, and a tight set of tokens you can trust. Drop it in via Composer and ship in an afternoon.

$ composer require pajak/ui

Battle-tested tokens

117 CSS custom properties - colors, type, spacing, radii, shadows - tuned for dense product UIs.

80+ Blade components

Buttons, cards, inputs, tables, accordions, steppers - all opinionated, all consistent, all yours to fork.

Accessible by default

Focus rings, WCAG AA contrast, ARIA-ready markup. Built so you don't have to think about accessibility.

Installation

Up and running in three commands.

Pajak ships as a single Composer package. It registers a service provider, publishes its assets, and gives you the full kit on every Blade view.

1

Install via Composer

Requires PHP 8.5+ and Laravel 13 or newer. The package is published on Packagist.

terminal
# Install the package
composer require pajak/ui

# Optional: lock to a major
composer require pajak/ui:^1.0
2

Publish the assets

Copies the stylesheet and Blade component templates into your app so you can customise anything you need.

terminal
php artisan vendor:publish --tag=pajak-ui-assets
php artisan vendor:publish --tag=pajak-ui-views # optional
3

Include the stylesheet and script

Drop both tags into your layout. The stylesheet provides all tokens and component styles; the script powers interactive components like selects, sliders, and file uploads.

resources/views/layouts/app.blade.php
<link rel="stylesheet" href="{{ asset('vendor/pajak/ui/assets/main.css') }}">
<script src="{{ asset('vendor/pajak/ui/assets/main.js') }}" defer type="module"></script>
Quickstart

Your first Pajak view.

Compose Blade components like Lego. Every component accepts standard props for variant, size, and any HTML attribute you'd expect.

resources/views/dashboard.blade.php
<x-pajak::card>
    <x-slot:kicker>Q1 performance</x-slot:kicker>
    <x-slot:title>$24,820</x-slot:title>

    Monthly revenue

    <x-slot:footer>
        <x-pajak::badge :color="BadgeColor::Success">On track</x-pajak::badge>
        <x-pajak::button :variant="Variant::Primary">View report</x-pajak::button>
    </x-slot:footer>
</x-pajak::card>
Components

80+ components, organized.

Every piece is a thin Blade wrapper around the tokens. Each one ships with one-click copy - paste straight into your view.

Design Tokens

One palette. Ten steps. Zero guesswork.

Every color, radius and space in Pajak comes from a single CSS custom property. Override them at the :root and the entire system re-themes.

primary-50
#EBF0FB
primary-100
#D6E1F7
primary-200
#ADC3EF
primary-300
#84A5E7
primary-400
#6B93DF
primary-500
#5386E4
primary-600
#3F6FCA
primary-700
#3366CC
primary-800
#1E4A9E
primary-900
#0F2E6B
success
#27AE60
warning
#F5A623
error
#E53935
info
#5386E4
accent
#C9A96E
app.scss - rebrand in 6 lines
:root {
  --color-primary-500: #10b981;  /* swap brand */
  --color-primary-700: #047857;
  --radius-md:        14px;     /* softer corners */
  --font-display:     "Outfit", sans-serif;
}

Ship your next form, faster.

Stop reinventing buttons. Pull in Pajak, swap two tokens to match your brand, and focus on the things that actually matter - your data, your customers, your business logic.