Components

Layout

Surface and structure components for organising content — cards, lists, and key-value detail views.

Card

Surface container for grouped content. Supports kicker, title, body, and footer slots. Lifts on hover via a CSS transition.

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>

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>