Components
pinion-ui

Theme

Tune

Lang

Cards

appearance = default / elevated / filled / base-100 / base-200 / base-300 / outline / soft / solid / bordered-top / ghost — toggle divider

appearance — default / elevated / filled / ghost

Default

base-100 with a base-content/10 border.

Elevated

Lifted with a shadow.

Filled

Filled with the base-200 surface.

Ghost

No background and no border.

<x-card appearance="default">
    <x-slot:header><h3 class="font-bold">Default</h3></x-slot:header>
    <p class="text-sm text-base-content/70">base-100 with a base-content/10 border.</p>
</x-card>
<x-card appearance="elevated">
    <x-slot:header><h3 class="font-bold">Elevated</h3></x-slot:header>
    <p class="text-sm text-base-content/70">Lifted with a shadow.</p>
</x-card>
<x-card appearance="filled">
    <x-slot:header><h3 class="font-bold">Filled</h3></x-slot:header>
    <p class="text-sm text-base-content/70">Filled with the base-200 surface.</p>
</x-card>
<x-card appearance="ghost">
    <x-slot:header><h3 class="font-bold">Ghost</h3></x-slot:header>
    <p class="text-sm text-base-content/70">No background and no border.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Default
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            base-100 with a base-content/10 border.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 shadow-[var(--shadow-box)] flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Elevated
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            Lifted with a shadow.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-200 text-base-content border-transparent flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Filled
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            Filled with the base-200 surface.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-transparent text-base-content border-transparent flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Ghost
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            No background and no border.
        </p>
</div>
</div>

appearance=base-100 x color

Primary

A tinted surface with a colored title.

Accent

A tinted surface with a colored title.

Success

A tinted surface with a colored title.

Warning

A tinted surface with a colored title.

<x-card appearance="base-100" color="primary">
    <x-slot:header><h3 class="font-bold">Primary</h3></x-slot:header>
    <p class="text-sm opacity-80">A tinted surface with a colored title.</p>
</x-card>
<x-card appearance="base-100" color="accent">
    <x-slot:header><h3 class="font-bold">Accent</h3></x-slot:header>
    <p class="text-sm opacity-80">A tinted surface with a colored title.</p>
</x-card>
<x-card appearance="base-100" color="success">
    <x-slot:header><h3 class="font-bold">Success</h3></x-slot:header>
    <p class="text-sm opacity-80">A tinted surface with a colored title.</p>
</x-card>
<x-card appearance="base-100" color="warning">
    <x-slot:header><h3 class="font-bold">Warning</h3></x-slot:header>
    <p class="text-sm opacity-80">A tinted surface with a colored title.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-primary border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Primary
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            A tinted surface with a colored title.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-accent border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Accent
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            A tinted surface with a colored title.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-success border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Success
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            A tinted surface with a colored title.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-warning border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Warning
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            A tinted surface with a colored title.
        </p>
</div>
</div>

appearance=base-200 x color (on a base-200 surface)

Primary

Blends into a base-200 panel.

Info

Blends into a base-200 panel.

Success

Blends into a base-200 panel.

Error

Blends into a base-200 panel.

<x-card appearance="base-200" color="primary">
    <x-slot:header><h3 class="font-bold">Primary</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-200 panel.</p>
</x-card>
<x-card appearance="base-200" color="info">
    <x-slot:header><h3 class="font-bold">Info</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-200 panel.</p>
</x-card>
<x-card appearance="base-200" color="success">
    <x-slot:header><h3 class="font-bold">Success</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-200 panel.</p>
</x-card>
<x-card appearance="base-200" color="error">
    <x-slot:header><h3 class="font-bold">Error</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-200 panel.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-200 text-primary border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Primary
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-200 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-200 text-info border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Info
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-200 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-200 text-success border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Success
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-200 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-200 text-error border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Error
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-200 panel.
        </p>
</div>
</div>

appearance=base-300 x color (on a base-300 surface)

Primary

Blends into a base-300 panel.

Accent

Blends into a base-300 panel.

Warning

Blends into a base-300 panel.

Neutral

Blends into a base-300 panel.

<x-card appearance="base-300" color="primary">
    <x-slot:header><h3 class="font-bold">Primary</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-300 panel.</p>
</x-card>
<x-card appearance="base-300" color="accent">
    <x-slot:header><h3 class="font-bold">Accent</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-300 panel.</p>
</x-card>
<x-card appearance="base-300" color="warning">
    <x-slot:header><h3 class="font-bold">Warning</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-300 panel.</p>
</x-card>
<x-card appearance="base-300" color="neutral">
    <x-slot:header><h3 class="font-bold">Neutral</h3></x-slot:header>
    <p class="text-sm opacity-80">Blends into a base-300 panel.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-300 text-primary border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Primary
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-300 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-300 text-accent border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Accent
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-300 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-300 text-warning border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Warning
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-300 panel.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-300 text-base-content border-base-content/10 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Neutral
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            Blends into a base-300 panel.
        </p>
</div>
</div>

appearance=outline x color

Primary

A primary border on a transparent background.

Success

A success border on a transparent background.

Warning

A warning border on a transparent background.

Error

An error border on a transparent background.

<x-card appearance="outline" color="primary">
    <x-slot:header><h3 class="font-bold">Primary</h3></x-slot:header>
    <p class="text-sm text-base-content/70">A primary border on a transparent background.</p>
</x-card>
<x-card appearance="outline" color="success">
    <x-slot:header><h3 class="font-bold">Success</h3></x-slot:header>
    <p class="text-sm text-base-content/70">A success border on a transparent background.</p>
</x-card>
<x-card appearance="outline" color="warning">
    <x-slot:header><h3 class="font-bold">Warning</h3></x-slot:header>
    <p class="text-sm text-base-content/70">A warning border on a transparent background.</p>
</x-card>
<x-card appearance="outline" color="error">
    <x-slot:header><h3 class="font-bold">Error</h3></x-slot:header>
    <p class="text-sm text-base-content/70">An error border on a transparent background.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-transparent text-base-content border-primary flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Primary
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            A primary border on a transparent background.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-transparent text-base-content border-success flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Success
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            A success border on a transparent background.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-transparent text-base-content border-warning flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Warning
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            A warning border on a transparent background.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-transparent text-base-content border-error flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Error
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            An error border on a transparent background.
        </p>
</div>
</div>

appearance=soft x color

Primary soft

tinted background + colored text.

Info soft

tinted background + colored text.

Success soft

tinted background + colored text.

Warning soft

tinted background + colored text.

<x-card appearance="soft" color="primary">
    <x-slot:header><h3 class="font-bold">Primary soft</h3></x-slot:header>
    <p class="text-sm opacity-80">tinted background + colored text.</p>
</x-card>
<x-card appearance="soft" color="info">
    <x-slot:header><h3 class="font-bold">Info soft</h3></x-slot:header>
    <p class="text-sm opacity-80">tinted background + colored text.</p>
</x-card>
<x-card appearance="soft" color="success">
    <x-slot:header><h3 class="font-bold">Success soft</h3></x-slot:header>
    <p class="text-sm opacity-80">tinted background + colored text.</p>
</x-card>
<x-card appearance="soft" color="warning">
    <x-slot:header><h3 class="font-bold">Warning soft</h3></x-slot:header>
    <p class="text-sm opacity-80">tinted background + colored text.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-primary/10 text-primary border-primary/20 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Primary soft
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            tinted background + colored text.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-info/10 text-info border-info/20 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Info soft
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            tinted background + colored text.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-success/10 text-success border-success/20 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Success soft
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            tinted background + colored text.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-warning/10 text-warning border-warning/20 flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Warning soft
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm opacity-80">
            tinted background + colored text.
        </p>
</div>
</div>

appearance=solid / bordered-top

Solid Primary

An emphasized card for CTAs.

Solid Neutral

A calm, high-contrast block.

Bordered-top Info

Top accent bar.

Bordered-top Success

Preline-style top accent.

<x-card appearance="solid" color="primary">
    <h3 class="font-bold">Solid Primary</h3>
    <p class="text-sm opacity-80 mt-1">An emphasized card for CTAs.</p>
</x-card>
<x-card appearance="solid" color="neutral">
    <h3 class="font-bold">Solid Neutral</h3>
    <p class="text-sm opacity-80 mt-1">A calm, high-contrast block.</p>
</x-card>
<x-card appearance="bordered-top" color="info">
    <x-slot:header><h3 class="font-bold">Bordered-top Info</h3></x-slot:header>
    <p class="text-sm text-base-content/70">Top accent bar.</p>
</x-card>
<x-card appearance="bordered-top" color="success">
    <x-slot:header><h3 class="font-bold">Bordered-top Success</h3></x-slot:header>
    <p class="text-sm text-base-content/70">Preline-style top accent.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-primary text-primary-content border-primary flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<h3 class="font-bold">
            Solid Primary
        </h3>
<p class="text-sm opacity-80 mt-1">
            An emphasized card for CTAs.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-neutral text-neutral-content border-neutral flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<h3 class="font-bold">
            Solid Neutral
        </h3>
<p class="text-sm opacity-80 mt-1">
            A calm, high-contrast block.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 border-t-4 border-t-info flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Bordered-top Info
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            Top accent bar.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 border-t-4 border-t-success flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Bordered-top Success
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            Preline-style top accent.
        </p>
</div>
</div>

divider=false

Default + no divider

The header/footer rules are removed.

footer text

Elevated + no divider

Shadow only, no internal rules.

Base-100 + no divider

Tinted surface, no internal rules.

<x-card :divider="false">
    <x-slot:header><h3 class="font-bold">Default + no divider</h3></x-slot:header>
    <p class="text-sm text-base-content/70">The header/footer rules are removed.</p>
    <x-slot:footer><span class="text-xs text-base-content/60">footer text</span></x-slot:footer>
</x-card>
<x-card appearance="elevated" :divider="false">
    <x-slot:header><h3 class="font-bold">Elevated + no divider</h3></x-slot:header>
    <p class="text-sm text-base-content/70">Shadow only, no internal rules.</p>
</x-card>
<x-card appearance="base-100" color="info" :divider="false">
    <x-slot:header><h3 class="font-bold">Base-100 + no divider</h3></x-slot:header>
    <p class="text-sm opacity-80">Tinted surface, no internal rules.</p>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 p-lg flex flex-col">
<div class="mb-md">
<h3 class="font-bold">
            Default + no divider
        </h3>
</div>
<div class="flex-1">
<p class="text-sm text-base-content/70">
            The header/footer rules are removed.
        </p>
</div>
<div class="mt-md">
<span class="text-xs text-base-content/60">footer text</span>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 shadow-[var(--shadow-box)] p-lg flex flex-col">
<div class="mb-md">
<h3 class="font-bold">
            Elevated + no divider
        </h3>
</div>
<div class="flex-1">
<p class="text-sm text-base-content/70">
            Shadow only, no internal rules.
        </p>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-info border-base-content/10 p-lg flex flex-col">
<div class="mb-md">
<h3 class="font-bold">
            Base-100 + no divider
        </h3>
</div>
<div class="flex-1">
<p class="text-sm opacity-80">
            Tinted surface, no internal rules.
        </p>
</div>
</div>

hoverable / header + footer slots

XY

pinion-ui

Laravel Blade UI kit

Infinite looks from two orthogonal axes: theme x tune.

active

Pro plan

2,980 / month

  • Unlimited components
  • Priority support
  • Custom tune
<x-card appearance="elevated" hoverable>
    <x-slot:header>
        <div class="flex items-center gap-2">
            <x-avatar initials="XY" color="primary" appearance="solid" size="sm" />
            <div>
                <h3 class="font-bold">pinion-ui</h3>
                <p class="text-xs text-base-content/60">Laravel Blade UI kit</p>
            </div>
        </div>
    </x-slot:header>
    <p class="text-sm text-base-content/70">Infinite looks from two orthogonal axes: theme x tune.</p>
    <x-slot:footer>
        <div class="flex items-center justify-between">
            <x-badge color="success" appearance="dot">active</x-badge>
            <x-button size="sm" appearance="soft">Details</x-button>
        </div>
    </x-slot:footer>
</x-card>
<x-card appearance="base-100" color="primary" hoverable>
    <x-slot:header><h3 class="font-bold">Pro plan</h3></x-slot:header>
    <p class="text-3xl font-bold">2,980<span class="text-sm text-base-content/60 font-normal"> / month</span></p>
    <ul class="mt-4 space-y-1 text-sm text-base-content/70">
        <li>Unlimited components</li>
        <li>Priority support</li>
        <li>Custom tune</li>
    </ul>
    <x-slot:footer>
        <x-button color="primary" class="w-full">Start now</x-button>
    </x-slot:footer>
</x-card>

<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-base-content border-base-content/10 shadow-[var(--shadow-box)] transition-shadow hover:shadow-[var(--shadow-box)] cursor-pointer flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<div class="flex items-center gap-2">
<span class="relative inline-flex shrink-0 w-8 h-8 text-xs rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>
<div>
<h3 class="font-bold">
                    pinion-ui
                </h3>
<p class="text-xs text-base-content/60">
                    Laravel Blade UI kit
                </p>
</div>
</div>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-sm text-base-content/70">
            Infinite looks from two orthogonal axes: theme x tune.
        </p>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-t-[length:var(--border)] border-base-content/10">
<div class="flex items-center justify-between">
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-success"></span> active</span>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary/10 text-primary border-transparent hover:bg-primary/20 focus-visible:ring-primary cursor-pointer">Details</button>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border overflow-hidden bg-base-100 text-primary border-base-content/10 transition-shadow hover:shadow-[var(--shadow-box)] cursor-pointer flex flex-col">
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-b-[length:var(--border)] border-base-content/10">
<h3 class="font-bold">
            Pro plan
        </h3>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] flex-1">
<p class="text-3xl font-bold">
            2,980 <span class="text-sm text-base-content/60 font-normal">/ month</span>
</p>
<ul class="mt-4 space-y-1 text-sm text-base-content/70">
<li>Unlimited components
            </li>
<li>Priority support
            </li>
<li>Custom tune
            </li>
</ul>
</div>
<div class="-mx-[var(--border)] py-lg px-[calc(var(--spacing-lg)+var(--border))] border-t-[length:var(--border)] border-base-content/10">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer w-full">Start now</button>
</div>
</div>