Icon Box

icon-box ui

Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.

Also available for Vue ->

Installation

$ pnpm dlx shadcn@latest add https://uipkge.dev/r/react/icon-box.json

$ npx shadcn@latest add https://uipkge.dev/r/react/icon-box.json

$ yarn dlx shadcn@latest add https://uipkge.dev/r/react/icon-box.json

$ bunx shadcn@latest add https://uipkge.dev/r/react/icon-box.json

Named registry: npx shadcn@latest add @uipkge-react/icon-box Installs to: components/ui/icon-box/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`icon` Icon component rendered inside the box (e.g. a Lucide icon).	`React.ComponentType<{ className?: string; 'aria-hidden'?: boolean \| 'true' \| 'false' }>`	—	required
`variant`	`'primary' \| 'muted' \| 'custom'`	—	optional
`shape`	`'rounded' \| 'circle'`	—	optional
`size`	`'sm' \| 'md' \| 'lg'`	—	optional
`iconClass` Class applied to the icon. Preferred name — matches Vue `iconClass`.	`string`	—	optional
`iconClassName` @deprecated Use `iconClass`. Kept for backwards compatibility.	`string`	—	optional

npm dependencies

lucide-react

Used by

quick-actions

Files installed (2)

components/ui/icon-box/icon-box.tsx 1.6 kB

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface IconBoxProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Icon component rendered inside the box (e.g. a Lucide icon). */
  icon: React.ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>
  variant?: 'primary' | 'muted' | 'custom'
  shape?: 'rounded' | 'circle'
  size?: 'sm' | 'md' | 'lg'
  /** Class applied to the icon. Preferred name — matches Vue `iconClass`. */
  iconClass?: string
  /** @deprecated Use `iconClass`. Kept for backwards compatibility. */
  iconClassName?: string
}

const variantClasses: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  muted: 'bg-muted text-muted-foreground',
  custom: '',
}

const shapeClasses: Record<string, string> = {
  rounded: 'rounded-lg',
  circle: 'rounded-full',
}

const sizeClasses: Record<string, string> = {
  sm: 'p-1.5',
  md: 'p-2',
  lg: 'p-3',
}

const iconSizes: Record<string, string> = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-6',
}

const IconBox = React.forwardRef<HTMLDivElement, IconBoxProps>(
  (
    {
      className,
      icon: Icon,
      variant = 'primary',
      shape = 'rounded',
      size = 'md',
      iconClass,
      iconClassName,
      ...props
    },
    ref,
  ) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="icon-box"
      className={cn('shrink-0', variantClasses[variant], shapeClasses[shape], sizeClasses[size], className)}
      {...props}
    >
      <Icon className={cn(iconSizes[size], iconClass ?? iconClassName)} aria-hidden="true" />
    </div>
  ),
)
IconBox.displayName = 'IconBox'

export { IconBox }

components/ui/icon-box/index.ts 0.1 kB

export { IconBox, type IconBoxProps } from './icon-box'

Raw manifest: https://uipkge.dev/r/react/icon-box.json

Change language