Logo
Neura UI
Loading…
Logo
All pages 86

Icon Stack

A layered isometric illustration primitive that frames an icon inside a stack of offset panels — perfect for empty states and feature callouts, drawn entirely with SVG so it needs no image assets.

Basic Usage

Pass any icon name to place it on the front panel of the stack:
blade 
<neura::icon-stack icon="folder" />
<neura::icon-stack icon="photo" />
<neura::icon-stack icon="document-text" />
<neura::icon-stack icon="inbox" />

Sizes

Five sizes are available. Each keeps the panel's isometric aspect ratio and scales the inner icon to match:
blade 
<neura::icon-stack size="xs" icon="cube" />
<neura::icon-stack size="sm" icon="cube" />
<neura::icon-stack size="md" icon="cube" />
<neura::icon-stack size="lg" icon="cube" />
<neura::icon-stack size="xl" icon="cube" />

Semantic Colors

The color prop tints the panels and the inner icon using the design system's semantic tokens, so the stack always adapts to light and dark themes:
blade 
<neura::icon-stack color="foreground" icon="folder" />
<neura::icon-stack color="primary" icon="sparkles" />
<neura::icon-stack color="success" icon="check-circle" />
<neura::icon-stack color="warning" icon="exclamation-triangle" />
<neura::icon-stack color="danger" icon="trash" />

Custom Content

Instead of an icon name, drop any markup into the default slot — the content is automatically skewed to sit flat on the front panel:
blade
PDF
7
<neura::icon-stack size="lg">
    <span class="text-sm font-semibold">PDF</span>
</neura::icon-stack>

<neura::icon-stack size="lg" color="primary">
    <span class="text-lg font-bold">7</span>
</neura::icon-stack>

With Badge

Use the badge slot to pin a status indicator to the front panel:
blade 
<neura::icon-stack size="lg" icon="bell">
    <x-slot:badge>
        <span class="block size-3 rounded-full bg-danger-500 ring-2 ring-surface"></span>
    </x-slot:badge>
</neura::icon-stack>

In an Empty State

The icon stack shines as the illustration for an empty state. Drop it into the illustration slot of <neura::empty-state> :
blade

No documents yet

Upload your first file and it will show up right here. 

<neura::empty-state
    variant="bordered"
    title="No documents yet"
    description="Upload your first file and it will show up right here.">
    <x-slot:illustration>
        <neura::icon-stack size="xl" icon="document-text" />
    </x-slot:illustration>
    <x-slot:actions>
        <neura::button size="sm" icon="arrow-up-tray">Upload file</neura::button>
    </x-slot:actions>
</neura::empty-state>

Configuration

Defaults live in config/neura-kit.php under the icon-stack key. Change the default size or color, or swap the size / color packs for your own resolver classes:
PHP 
// config/neura-kit.php

use Neura\Kit\NeuraKitConfig as Config;

'icon-stack' => Config::iconStack([
    'default' => [
        'size' => 'lg',          // xs · sm · md · lg · xl
        'color' => 'primary',    // foreground · muted · primary · success · warning · danger
    ],
    'packs' => [
        'sizes' => \Neura\Kit\Packs\IconStack\Size::class,
        'colors' => \Neura\Kit\Packs\IconStack\Color::class,
    ],
]),
The packs are resolved at render time via PackResolver::iconStackSize() and PackResolver::iconStackColor() , mirroring how every other Neura component looks up its tokens.

Props

Property Type Default Description
icon string null Icon name rendered on the front panel
iconVariant string outline Icon variant (outline , solid , …)
size string md One of xs · sm · md · lg · xl
color string foreground One of foreground · muted · primary · success · warning · danger
badge slot null Status indicator pinned to the front panel
slot slot null Custom content used instead of icon