Components

Layout

Cards, action tiles, lists, and key-value detail views.

Card

Surface container for grouped content. Supports kicker, title, subtitle, body, and footer slots. Lifts on hover via a CSS transition, or set :interactive="false" for stacked, non-clickable sections. Add an $icon slot for the settings-style icon-header layout.

x-pajak::card

With slots

Refund

Home Office Deduction

You may qualify for up to PLN 3,600 annually based on your declared workspace.

card-default.blade.php

@use('Pajak\Ui\Common\Enums\BadgeColor')

<x-pajak::card>
    <x-slot:kicker>Refund</x-slot:kicker>
    <x-slot:title>Home Office Deduction</x-slot:title>
    You may qualify for up to PLN 3,600 annually based on your declared workspace.
    <x-slot:footer>
        <x-pajak::badge :color="BadgeColor::Success">Eligible</x-pajak::badge>
    </x-slot:footer>
</x-pajak::card>

Accent variant

Filing Status

Individual taxpayer · 2025

card-accent.blade.php

@use('Pajak\Ui\Common\Enums\Card\CardVariant')

<x-pajak::card :variant="CardVariant::Accent">
    <x-slot:title>Filing Status</x-slot:title>
    Individual taxpayer · 2025
    <x-slot:footer>On track</x-slot:footer>
</x-pajak::card>

Static (non-interactive)

Personal Details

Update your name and contact information.

card-static.blade.php

<x-pajak::card :interactive="false">
    <x-slot:title>Personal Details</x-slot:title>
    Update your name and contact information.
</x-pajak::card>

Icon header (settings card)

Full name

Your account is protected with an authenticator app.

Email digests are sent every Monday.

card-icon-header.blade.php

<x-pajak::card :interactive="false">
    <x-slot:icon variant="primary">
        <x-heroicon-o-user />
    </x-slot:icon>
    <x-slot:title>Profile Information</x-slot:title>
    <x-slot:subtitle>Your name and contact details</x-slot:subtitle>

    <x-pajak-form::input name="full_name" label="Full name" value="Alice Martin" />

    <x-slot:footer>
        <x-pajak::button>Save</x-pajak::button>
    </x-slot:footer>
</x-pajak::card>

<x-pajak::card :interactive="false">
    <x-slot:icon variant="green">
        <x-heroicon-o-shield-check />
    </x-slot:icon>
    <x-slot:title>Security</x-slot:title>
    <x-slot:subtitle>Two-factor authentication is on</x-slot:subtitle>
    Your account is protected with an authenticator app.
</x-pajak::card>

<x-pajak::card :interactive="false">
    <x-slot:icon variant="amber">
        <x-heroicon-o-bell />
    </x-slot:icon>
    <x-slot:title>Notifications</x-slot:title>
    <x-slot:subtitle>Choose what you hear about</x-slot:subtitle>
    Email digests are sent every Monday.
</x-pajak::card>

Action Tile

Linked tile with a coloured icon, a title and a short description — for quick-action grids on dashboards. Lifts on hover (shadow and a 1px translate). The icon tile colour is set with :color.

x-pajak::action-tile

Prop	Type	Default	Description
`title`	`string`	—	Tile heading
`href`	`string`	`#`	Link URL
`description`	`string\|null`	`null`	Supporting text below the title
`:color`	`ActionTileColor`	`Blue`	Icon tile colour: `Blue`, `Green` or `Sand`

Slot	Description
`$icon`	Icon rendered inside the coloured tile (SVGs are sized to 20px). Optional.

Default

New return Start a new tax filing

action-tile-default.blade.php

<x-pajak::action-tile
    href="#"
    title="New return"
    description="Start a new tax filing"
>
    <x-slot:icon>
        <x-heroicon-o-document-plus />
    </x-slot:icon>
</x-pajak::action-tile>

Colour variants

New return Start a new tax filing Invite client Send an invitation by email Upload documents Add receipts and statements

action-tile-colors.blade.php

@use('Pajak\Ui\Common\Enums\ActionTile\ActionTileColor')

<x-pajak::action-tile href="#" title="New return" description="Start a new tax filing" :color="ActionTileColor::Blue">
    <x-slot:icon><x-heroicon-o-document-plus /></x-slot:icon>
</x-pajak::action-tile>

<x-pajak::action-tile href="#" title="Invite client" description="Send an invitation by email" :color="ActionTileColor::Green">
    <x-slot:icon><x-heroicon-o-user-plus /></x-slot:icon>
</x-pajak::action-tile>

<x-pajak::action-tile href="#" title="Upload documents" description="Add receipts and statements" :color="ActionTileColor::Sand">
    <x-slot:icon><x-heroicon-o-arrow-up-tray /></x-slot:icon>
</x-pajak::action-tile>

List

Grouped list of rows with optional leading, body, and trailing slots. Renders as a card-like container with dividers between rows.

x-pajak::list

Rows with leading, trailing & badge

PIT-11_2025_Acme.pdf

248 KB · Mar 12, 2026

Verified

ZUS_RCA_Q1_2026.pdf

184 KB · Jan 5, 2026

Pending

[email protected]

list-default.blade.php

@use('Pajak\Ui\Common\Enums\BadgeColor')

<x-pajak::list>
    <x-pajak::list-row :clickable="true">
        <x-slot:leading>
            <div class="ex-list-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5386E4" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            </div>
        </x-slot:leading>
        <x-slot:title>PIT-11_2025_Acme.pdf</x-slot:title>
        <x-slot:subtitle>248 KB · Mar 12, 2026</x-slot:subtitle>
        <x-slot:trailing>
            <x-pajak::badge :color="BadgeColor::Success">Verified</x-pajak::badge>
        </x-slot:trailing>
    </x-pajak::list-row>

    <x-pajak::list-row :clickable="true">
        <x-slot:leading>
            <div class="ex-list-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5386E4" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            </div>
        </x-slot:leading>
        <x-slot:title>ZUS_RCA_Q1_2026.pdf</x-slot:title>
        <x-slot:subtitle>184 KB · Jan 5, 2026</x-slot:subtitle>
        <x-slot:trailing>
            <x-pajak::badge :color="BadgeColor::Warning">Pending</x-pajak::badge>
        </x-slot:trailing>
    </x-pajak::list-row>

    <x-pajak::list-row :clickable="true">
        <x-slot:title>Email</x-slot:title>
        <x-slot:subtitle>[email protected]</x-slot:subtitle>
        <x-slot:trailing>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </x-slot:trailing>
    </x-pajak::list-row>
</x-pajak::list>

Detail

A key-value display component for presenting structured data in a styled card. Use x-pajak::detail as the outer shell and x-pajak::detail-row for each row.

x-pajak::detail

Detail properties

Prop	Type	Default	Description
`variant`	`DetailVariant`	`Default`	`Default` \| `Compact` \| `Grid2` \| `Flush`
`title`	`string\|null`	`null`	Header title; omit to suppress the header entirely
`action-label`	`string\|null`	`null`	Header action link label (e.g. `Edit`)
`action-href`	`string\|null`	`null`	URL for the action link

Detail row properties

Prop	Type	Default	Description
`key`	`string`	—	Required. Label shown in the left column
`mono`	`bool`	`false`	Renders the value in monospace font
`muted`	`bool`	`false`	Renders the value in muted/italic style
`copyable`	`bool`	`false`	Adds hover highlight; pair with `x-pajak::copy-button` in the slot

Default

Name Jan Kowalski

Email [email protected]

Status Active

Tax ID PL1234567890

detail-default.blade.php

<x-pajak::detail>
    <x-pajak::detail-row key="Name">Jan Kowalski</x-pajak::detail-row>
    <x-pajak::detail-row key="Email">[email protected]</x-pajak::detail-row>
    <x-pajak::detail-row key="Status">Active</x-pajak::detail-row>
    <x-pajak::detail-row key="Tax ID">PL1234567890</x-pajak::detail-row>
</x-pajak::detail>

With header and action

Full name Jan Kowalski

Tax office US Warszawa-Bemowo

Filing year 2025

detail-header.blade.php

<x-pajak::detail title="Taxpayer profile" action-label="Edit" action-href="#">
    <x-pajak::detail-row key="Full name">Jan Kowalski</x-pajak::detail-row>
    <x-pajak::detail-row key="Tax office">US Warszawa-Bemowo</x-pajak::detail-row>
    <x-pajak::detail-row key="Filing year">2025</x-pajak::detail-row>
</x-pajak::detail>

Row variants (mono, muted, copyable)

Name Jan Kowalski

PESEL 90010112345

Notes No notes added

Reference PIT-2025-00184736

detail-row-props.blade.php

<x-pajak::detail>
    <x-pajak::detail-row key="Name">Jan Kowalski</x-pajak::detail-row>
    <x-pajak::detail-row key="PESEL" :mono="true">90010112345</x-pajak::detail-row>
    <x-pajak::detail-row key="Notes" :muted="true">No notes added</x-pajak::detail-row>
    <x-pajak::detail-row key="Reference" :copyable="true">
        <x-pajak::copy-button value="PIT-2025-00184736" :icon="true" />
        <span>PIT-2025-00184736</span>
    </x-pajak::detail-row>
</x-pajak::detail>

Compact

Company Acme Sp. z o.o.

NIP 123-456-78-90

City Warsaw

detail-compact.blade.php

@use('Pajak\Ui\Common\Enums\Detail\DetailVariant')

<x-pajak::detail :variant="DetailVariant::Compact" title="Employer">
    <x-pajak::detail-row key="Company">Acme Sp. z o.o.</x-pajak::detail-row>
    <x-pajak::detail-row key="NIP" :mono="true">123-456-78-90</x-pajak::detail-row>
    <x-pajak::detail-row key="City">Warsaw</x-pajak::detail-row>
</x-pajak::detail>

Grid-2

First name Jan

Last name Kowalski

Birth date 01 Jan 1990

Citizenship Polish

Phone +48 600 123 456

Email [email protected]

detail-grid-2.blade.php

@use('Pajak\Ui\Common\Enums\Detail\DetailVariant')

<x-pajak::detail :variant="DetailVariant::Grid2" title="Personal details" action-label="Edit" action-href="#">
    <x-slot:body>
        <x-pajak::detail-row key="First name">Jan</x-pajak::detail-row>
        <x-pajak::detail-row key="Last name">Kowalski</x-pajak::detail-row>
        <x-pajak::detail-row key="Birth date">01 Jan 1990</x-pajak::detail-row>
        <x-pajak::detail-row key="Citizenship">Polish</x-pajak::detail-row>
        <x-pajak::detail-row key="Phone">+48 600 123 456</x-pajak::detail-row>
        <x-pajak::detail-row key="Email">[email protected]</x-pajak::detail-row>
    </x-slot:body>
</x-pajak::detail>

Flush (embedded in card)

Filing status

Year 2025

Form PIT-37

Submitted Not yet submitted

detail-flush.blade.php

@use('Pajak\Ui\Common\Enums\Detail\DetailVariant')

<div class="pajak-card">
    <div class="pajak-card__title">Filing status</div>
    <x-pajak::detail :variant="DetailVariant::Flush">
        <x-pajak::detail-row key="Year">2025</x-pajak::detail-row>
        <x-pajak::detail-row key="Form">PIT-37</x-pajak::detail-row>
        <x-pajak::detail-row key="Submitted" :muted="true">Not yet submitted</x-pajak::detail-row>
    </x-pajak::detail>
</div>