Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.8K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.2
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Color Picker
  • Data Grid
  • Date Selector
  • Emoji Picker
  • Event Calendar
  • File Type
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Application

  • App ShellAdded an observability console app shell
  • Auth
  • Card
  • Dashboard
  • DialogAdded a duplicate contact check dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • BaseAdded an API request logs grid, and 2 grids were rebuilt
  • AdvancedAdded 12 new Data Grid Advanced blocks, 17 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area Chart
  • Bar Chart
  • Composed ChartChart 36 is now an operating margin chart
  • Line Chart
  • Pie ChartAdded a cloud spend budget rose
  • Radial Chart
  • Sankey Chart
  • Slope Chart
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageAdded 2 new AI Usage blocks, 4 in all

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • BillingAdded a tenant billing settings block
  • BookingsAdded a hotel room board, and the salon front desk was rebuilt
  • Files
  • Inventory
  • MapNew Map category with a fleet dispatch map
  • TravelNew Travel category with 2 blocks for event travel operators
  • UsersAdded a team access settings block
  • Digital Twin

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.8K

Shadcn Icon Stack

PreviousNext

Custom Shadcn Icon Stack for React and Tailwind CSS. Shadcn Icon Stack for isometric icons, layered icon illustrations, and empty-state visuals.

Base UIRadix UI

Installation

pnpm dlx shadcn@latest add @reui/icon-stack

Usage

import { InboxIcon } from "lucide-react"
 
import { IconStack } from "@/components/reui/icon-stack"

Shadcn Icon Stack Free Components

Browse 6 production-ready Shadcn Icon Stack components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 6 Shadcn Icon Stack components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

GanttIcon Tile

On This Page

InstallationUsageFor AI AgentsExamplesSizesColorsIcon BadgeEmpty State IllustrationItem MediaAPI ReferenceIconStack
<IconStack aria-hidden="true"> <InboxIcon className="size-4" /> </IconStack>

IconStack is a shadcn-compatible ReUI primitive for building layered isometric icons and compact isometric illustrations. Use it for empty states, onboarding steps, feature cards, dashboard status panels, and small UI moments that need more depth than a flat icon.

The main preview above shows the basic shadcn icon stack pattern: a layered SVG stack with one centered icon. Style the inner icon or custom content directly with its own className; the stack only provides the isometric artwork and overlay position. Keep meaningful labels in surrounding copy and mark purely decorative stacks with aria-hidden="true".

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Artwork for first run and no data screens, set in the media slot above the message
  • Compact media for list rows, such as a package entry in an outlined row
  • Decorative marks with more depth than a flat glyph, tinted by a theme color or topped with a badge

When not to use

  • A flat square surface that keeps one glyph the same size across rows and toolbars: use the Icon Tile component
  • A no data message that needs a title, description and actions laid out together: use the Empty component
  • A ready made first run or zero results page, with copy, art and buttons in place: use the Empty State blocks

Agent notes

  • A text color class on IconStack reaches only the layer outlines and shadow; icon-stack-content gives the child text-muted-foreground
  • Keep IconStack near its 72 wide by 81 tall viewBox ratio when resizing; the child is placed by percent of the box, not of the drawing
  • The child sits in icon-stack-content, which is skewed and pointer-events-none, so a button or link placed there gets no clicks
Markdownhttps://reui.io/docs/components/base/icon-stack.md
MCPget_component("icon-stack")
Installnpx shadcn@latest add @reui/icon-stack
Full index for agents:llms.txtReUI MCP setup

Examples

Sizes

import { IconStack } from "@/components/reui/icon-stack"
import { ArchiveIcon, LayersIcon, PackageIcon } from 'lucide-react'

const sizes = [
  {
    label: "Small",
    className: "h-16 w-14",
    icon: (
      <ArchiveIcon  className="size-3.5" />
    ),
  },
  {
    label: "Default",
    className: "h-20 w-18",
    icon: (
      <PackageIcon  className="size-4" />
    ),
  },
  {
    label: "Large",
    className: "h-28 w-24",
    icon: (
      <LayersIcon  className="size-6" />
    ),
  },
]

export function Pattern() {
  return (
    <div className="flex flex-wrap items-end justify-center gap-8">
      {sizes.map((item) => (
        <div key={item.label} className="flex flex-col items-center gap-2">
          <IconStack aria-hidden="true" className={item.className}>
            {item.icon}
          </IconStack>
          <span className="text-muted-foreground text-sm">{item.label}</span>
        </div>
      ))}
    </div>
  )
}

Colors

import { IconStack } from "@/components/reui/icon-stack"
import { SparklesIcon } from 'lucide-react'

const stacks = [
  {
    label: "Neutral",
    className: "text-foreground",
    iconClassName: "text-muted-foreground",
  },
  {
    label: "Primary",
    className: "text-primary",
    iconClassName: "text-primary",
  },
  {
    label: "Success",
    className: "text-success",
    iconClassName: "text-success",
  },
  {
    label: "Warning",
    className: "text-warning",
    iconClassName: "text-warning",
  },
]

export function Pattern() {
  return (
    <div className="flex flex-wrap items-end justify-center gap-7">
      {stacks.map((item) => (
        <div key={item.label} className="flex flex-col items-center gap-2">
          <IconStack aria-hidden="true" className={item.className}>
            <SparklesIcon  className="`size-4 ${item.iconClassName" />
          </IconStack>
          <span className="text-muted-foreground text-sm">{item.label}</span>
        </div>
      ))}
    </div>
  )
}

Icon Badge

import { IconStack } from "@/components/reui/icon-stack"
import { CheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconStack aria-hidden="true" className="text-primary h-24 w-22">
        <span className="bg-background text-primary flex size-8 items-center justify-center rounded-full border shadow-xs">
          <CheckIcon  className="size-4" />
        </span>
      </IconStack>
    </div>
  )
}

Empty State Illustration

import { IconStack } from "@/components/reui/icon-stack"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { DatabaseIcon, InboxIcon, UserPlusIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center p-4">
      <Empty className="max-w-md py-10">
        <EmptyHeader>
          <EmptyMedia>
            <IconStack aria-hidden="true" className="text-primary h-24 w-22">
              <InboxIcon  className="text-primary size-5" />
            </IconStack>
          </EmptyMedia>
          <EmptyTitle>Workspace is ready</EmptyTitle>
          <EmptyDescription>
            Invite teammates or connect a data source to start filling this
            view.
          </EmptyDescription>
        </EmptyHeader>

        <EmptyContent className="flex-row justify-center gap-2">
          <Button size="sm">
            <UserPlusIcon  data-icon="inline-start" />
            Invite team
          </Button>
          <Button variant="outline" size="sm">
            <DatabaseIcon  data-icon="inline-start" />
            Connect source
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Item Media

import { IconStack } from "@/components/reui/icon-stack"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { PackageIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-md items-center justify-center p-4">
      <Item variant="outline" className="max-w-sm">
        <ItemMedia>
          <IconStack aria-hidden="true" className="text-primary h-12 w-11">
            <PackageIcon  className="text-primary size-3" />
          </IconStack>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Registry package ready</ItemTitle>
          <ItemDescription>
            Use IconStack as rich media inside compact shadcn items.
          </ItemDescription>
        </ItemContent>
      </Item>
    </div>
  )
}

API Reference

IconStack

PropTypeDefaultDescription
classNamestring-Controls the outer wrapper size, color, and layout.
childrenReact.ReactNode-Renders optional decorative content inside the stack.

All native div props are supported.

import { IconStack } from "@/components/reui/icon-stack"
import { LayersIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <IconStack aria-hidden="true">
        <LayersIcon  className="size-4" />
      </IconStack>
    </div>
  )
}