Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • 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
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • 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.7K

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
Radix 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 follow the Radix UI implementation with accessible primitives from the Radix stack 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://web.dev.reui.io/docs/components/radix/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>
  )
}