Shadcn Shadcn Icon Stack

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

Base UI Radix UI

Installation


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

Usage

More Shadcn Icon Stack 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.

Frame Kanban

On This Page

Installation Usage Examples Sizes Colors Icon Badge Empty State Illustration Item Media API Reference IconStack

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

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}

Prop	Type	Default	Description
`className`	`string`	-	Controls the outer wrapper size, color, and layout.
`children`	`React.ReactNode`	-	Renders optional decorative content inside the stack.

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>
  )
}