Display - Components - Pajak Design System

Accordion

Composable expandable/collapsible content sections with four visual variants and two expand modes (single and multi).

x-pajak::accordion

Default

Jan Kowalski · PESEL 80010112345 · Mazowieckie

Salary, freelance, rental income.

Internet relief, home office, child allowance.

accordion-default.blade.php

<x-pajak::accordion>
    <x-pajak::accordion-item title="Personal information" subtitle="Your name and address" :open="true">
        <p class="ex-p">Jan Kowalski · PESEL 80010112345 · Mazowieckie</p>
    </x-pajak::accordion-item>
    <x-pajak::accordion-item title="Income sources" badge="3 added">
        <p class="ex-p">Salary, freelance, rental income.</p>
    </x-pajak::accordion-item>
    <x-pajak::accordion-item title="Deductions & reliefs">
        <p class="ex-p">Internet relief, home office, child allowance.</p>
    </x-pajak::accordion-item>
</x-pajak::accordion>

FAQ & Filled variants

FAQ variant · multi-expand

For most individuals the PIT return is due by 30 April.

Yes — joint filing is supported for married couples.

Filled variant

PIT-11_acme_2025.pdf, ZUS_RCA_Q4.pdf

Internet relief · PLN 760

accordion-variants.blade.php

@use('Pajak\Ui\Common\Enums\AccordionVariant')
@use('Pajak\Ui\Common\Enums\AccordionMode')

<div class="ex-col ex-col--gap-lg">
    <div>
        <p class="ex-label">FAQ variant · multi-expand</p>
        <x-pajak::accordion :variant="AccordionVariant::Faq" :mode="AccordionMode::Multi">
            <x-pajak::accordion-item title="When is my tax return due?" :open="true">
                For most individuals the PIT return is due by <strong>30 April</strong>.
            </x-pajak::accordion-item>
            <x-pajak::accordion-item title="Can I file jointly with my spouse?">
                Yes — joint filing is supported for married couples.
            </x-pajak::accordion-item>
        </x-pajak::accordion>
    </div>
    <div>
        <p class="ex-label">Filled variant</p>
        <x-pajak::accordion :variant="AccordionVariant::Filled">
            <x-pajak::accordion-item title="Documents" badge="2">
                <p class="ex-p">PIT-11_acme_2025.pdf, ZUS_RCA_Q4.pdf</p>
            </x-pajak::accordion-item>
            <x-pajak::accordion-item title="Deductions">
                <p class="ex-p">Internet relief · PLN 760</p>
            </x-pajak::accordion-item>
        </x-pajak::accordion>
    </div>
</div>

Avatar

Circular user avatar displaying initials. Six color variants, five sizes, optional status dot and ring. Groups with overflow count via x-pajak::avatar-group.

x-pajak::avatar

Colors

JK AW MN PR EZ TS

avatar-default.blade.php

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

<div class="ex-row ex-row--gap-md">
    <x-pajak::avatar initials="JK" />
    <x-pajak::avatar initials="AW" :color="AvatarColor::Sand" />
    <x-pajak::avatar initials="MN" :color="AvatarColor::Teal" />
    <x-pajak::avatar initials="PR" :color="AvatarColor::Purple" />
    <x-pajak::avatar initials="EZ" :color="AvatarColor::Coral" />
    <x-pajak::avatar initials="TS" :color="AvatarColor::Slate" />
</div>

Sizes

JK JK JK JK JK

avatar-sizes.blade.php

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

<div class="ex-row ex-row--gap-md">
    <x-pajak::avatar initials="JK" :size="AvatarSize::Xs" />
    <x-pajak::avatar initials="JK" :size="AvatarSize::Sm" />
    <x-pajak::avatar initials="JK" />
    <x-pajak::avatar initials="JK" :size="AvatarSize::Lg" />
    <x-pajak::avatar initials="JK" :size="AvatarSize::Xl" />
</div>

Status & ring

JK AW MN PR

avatar-status.blade.php

@use('Pajak\Ui\Common\Enums\AvatarColor')
@use('Pajak\Ui\Common\Enums\AvatarStatus')

<div class="ex-row ex-row--gap-md">
    <x-pajak::avatar initials="JK" :status="AvatarStatus::Online" />
    <x-pajak::avatar initials="AW" :color="AvatarColor::Sand" :status="AvatarStatus::Away" />
    <x-pajak::avatar initials="MN" :color="AvatarColor::Teal" :status="AvatarStatus::Offline" />
    <x-pajak::avatar initials="PR" :color="AvatarColor::Purple" :ring="true" />
</div>

Avatar group

JK AW MN PR +4

avatar-group.blade.php

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

<x-pajak::avatar-group :overflow="4">
    <x-pajak::avatar initials="JK" />
    <x-pajak::avatar initials="AW" :color="AvatarColor::Sand" />
    <x-pajak::avatar initials="MN" :color="AvatarColor::Teal" />
    <x-pajak::avatar initials="PR" :color="AvatarColor::Purple" />
</x-pajak::avatar-group>

Badge

Small inline label for status, categories, and counts. Six color variants, three sizes, outline and dot modifiers.

x-pajak::badge

Colors

Default Complete In Progress Overdue Pending Draft

badge-default.blade.php

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

<div class="ex-row">
    <x-pajak::badge>Default</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Success">Complete</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Warning">In Progress</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Error">Overdue</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Info">Pending</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Neutral">Draft</x-pajak::badge>
</div>

Dot, outline & sizes

Verified Rejected Small Large

badge-variants.blade.php

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

<div class="ex-row">
    <x-pajak::badge :color="BadgeColor::Success" :dot="true">Verified</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Error" :outline="true">Rejected</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Warning" :size="Size::Sm">Small</x-pajak::badge>
    <x-pajak::badge :color="BadgeColor::Info" :size="Size::Lg">Large</x-pajak::badge>
</div>

Divider

Flexible separator for horizontal rules, vertical inline separators, and labeled "or"-style dividers.

x-pajak::divider

Horizontal variants

Subtle

Default

Strong

Dashed

Dotted

Labeled

or

divider-variants.blade.php

@use('Pajak\Ui\Common\Enums\Divider\DividerStrength')
@use('Pajak\Ui\Common\Enums\Divider\DividerStyle')

<div class="ex-col">
    <div>
        <p class="ex-label">Subtle</p>
        <x-pajak::divider :strength="DividerStrength::Subtle" />
    </div>
    <div>
        <p class="ex-label">Default</p>
        <x-pajak::divider />
    </div>
    <div>
        <p class="ex-label">Strong</p>
        <x-pajak::divider :strength="DividerStrength::Strong" />
    </div>
    <div>
        <p class="ex-label">Dashed</p>
        <x-pajak::divider :style="DividerStyle::Dashed" />
    </div>
    <div>
        <p class="ex-label">Dotted</p>
        <x-pajak::divider :style="DividerStyle::Dotted" />
    </div>
    <div>
        <p class="ex-label">Labeled</p>
        <x-pajak::divider :labeled="true">or</x-pajak::divider>
    </div>
</div>

Vertical

Invoice #142 Acme Sp. z o.o. Mar 12, 2026

divider-vertical.blade.php

@use('Pajak\Ui\Common\Enums\Divider\DividerOrientation')

<div class="ex-row ex-row--no-wrap ex-row--sm-text">
    <span>Invoice #142</span>
    <x-pajak::divider :orientation="DividerOrientation::Vertical" />
    <span>Acme Sp. z o.o.</span>
    <x-pajak::divider :orientation="DividerOrientation::Vertical" />
    <span>Mar 12, 2026</span>
</div>

Progress

Linear determinate progress bar. Three sizes, four colors, optional label and value display.

x-pajak::progress

With label & value

Income sources

65%

Personal details

100%

Deductions

30%

Review & submit

0%

progress-default.blade.php

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

<x-pajak::progress :value="65" label="Income sources" :show-value="true" />
<x-pajak::progress :value="100" :color="ProgressColor::Success" label="Personal details" :show-value="true" />
<x-pajak::progress :value="30" :color="ProgressColor::Warning" label="Deductions" :show-value="true" />
<x-pajak::progress :value="0" label="Review & submit" :show-value="true" />

Sizes & colors

progress-sizes-colors.blade.php

@use('Pajak\Ui\Common\Enums\ProgressSize')
@use('Pajak\Ui\Common\Enums\ProgressColor')

<x-pajak::progress :value="65" :size="ProgressSize::Sm" />
<x-pajak::progress :value="65" :size="ProgressSize::Md" />
<x-pajak::progress :value="65" :size="ProgressSize::Lg" />
<x-pajak::progress :value="100" :color="ProgressColor::Success" :size="ProgressSize::Md" />
<x-pajak::progress :value="30" :color="ProgressColor::Warning" :size="ProgressSize::Md" />
<x-pajak::progress :value="10" :color="ProgressColor::Danger" :size="ProgressSize::Md" />

Skeleton

Shimmer placeholder shown while content is loading. Six shape variants; width and height are set via the style attribute.

x-pajak::skeleton

Text lines

skeleton-default.blade.php

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

<div class="ex-col ex-col--gap-sm ex-col--full">
    <x-pajak::skeleton style="width: 40%" :shape="SkeletonShape::LineLg" />
    <x-pajak::skeleton style="width: 100%" />
    <x-pajak::skeleton style="width: 80%" />
    <x-pajak::skeleton style="width: 60%" :shape="SkeletonShape::LineSm" />
</div>

Mixed shapes

skeleton-shapes.blade.php

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

<div class="ex-skeleton-profile">
    <x-pajak::skeleton :shape="SkeletonShape::Circle" style="width:40px;height:40px;" />
    <div class="ex-skeleton-lines">
        <x-pajak::skeleton style="width: 60%" />
        <x-pajak::skeleton style="width: 40%" :shape="SkeletonShape::LineSm" />
    </div>
</div>
<x-pajak::skeleton :shape="SkeletonShape::Rect" style="width:100%;height:100px;margin-top:0.75rem;" />
<div class="ex-skeleton-pills">
    <x-pajak::skeleton :shape="SkeletonShape::Pill" style="width:64px;" />
    <x-pajak::skeleton :shape="SkeletonShape::Pill" style="width:80px;" />
</div>

Spinner

Loading indicators in three styles: arc (primary), dot pulse, and indeterminate bar.

x-pajak::spinner

Arc sizes

spinner-default.blade.php

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

<div class="ex-row ex-row--gap-lg">
    <x-pajak::spinner :size="SpinnerSize::Xs" />
    <x-pajak::spinner :size="SpinnerSize::Sm" />
    <x-pajak::spinner />
    <x-pajak::spinner :size="SpinnerSize::Lg" />
    <x-pajak::spinner :size="SpinnerSize::Xl" />
    <x-pajak::spinner :size="SpinnerSize::Xxl" />
</div>

Types & colors

spinner-types.blade.php

@use('Pajak\Ui\Common\Enums\SpinnerType')
@use('Pajak\Ui\Common\Enums\SpinnerColor')

<div class="ex-col">
    <div class="ex-row ex-row--gap-lg ex-row--no-wrap">
        <x-pajak::spinner :type="SpinnerType::Arc" />
        <x-pajak::spinner :type="SpinnerType::Arc" :color="SpinnerColor::Neutral" />
        <x-pajak::spinner :type="SpinnerType::Arc" :color="SpinnerColor::Success" />
        <x-pajak::spinner :type="SpinnerType::Arc" :color="SpinnerColor::Danger" />
    </div>
    <div class="ex-row ex-row--gap-lg ex-row--no-wrap">
        <x-pajak::spinner :type="SpinnerType::Dots" />
        <x-pajak::spinner :type="SpinnerType::Dots" :color="SpinnerColor::Neutral" />
    </div>
    <x-pajak::spinner :type="SpinnerType::Bar" />
</div>

Tooltip

Wrapper that shows a tooltip bubble on hover or keyboard focus. Pure CSS — no JavaScript required.

x-pajak::tooltip

Placement

tooltip-default.blade.php

@use('Pajak\Ui\Common\Enums\TooltipPlacement')
@use('Pajak\Ui\Common\Enums\Variant')

<div class="ex-row ex-row--gap-lg ex-row--justify-center ex-row--padded-y">
    <x-pajak::tooltip text="Upload document" :placement="TooltipPlacement::Top">
        <x-pajak::button>Top</x-pajak::button>
    </x-pajak::tooltip>
    <x-pajak::tooltip text="Save draft" :placement="TooltipPlacement::Right">
        <x-pajak::button>Right</x-pajak::button>
    </x-pajak::tooltip>
    <x-pajak::tooltip text="Delete record" :placement="TooltipPlacement::Bottom">
        <x-pajak::button :variant="Variant::Danger">Bottom</x-pajak::button>
    </x-pajak::tooltip>
    <x-pajak::tooltip text="View details" :placement="TooltipPlacement::Left">
        <x-pajak::button :variant="Variant::Ghost">Left</x-pajak::button>
    </x-pajak::tooltip>
</div>