IconBox

The IconBox component is a container that displays an icon with customizable styles and sizes, perfect for creating visual elements in your UI.

Basic Usage

import {
  IconBox,
  ThemeProvider,
  CubeIcon,
} from "@carton-org/react-neumorphism";

const MyComponent = () => {
  return <IconBox icon={<CubeIcon />} size="md" />;
};

Live Example

Props

Name	Type	Description	Required	Default Value
inset	boolean	Whether to use inset style for the icon box	No	false
rounded	boolean	Whether to use rounded corners	No	false
border	boolean	Whether to show a border around the icon box	No	false
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the icon box	No	"sm"
width	string	Custom width for the icon box	No	-
height	string	Custom height for the icon box	No	-
icon	React.ReactNode	Icon to display in the box	Yes	-
blank	boolean	Whether to show a blank box without an icon	No	false
iconBoxStyle	React.CSSProperties	Custom CSS styles for the icon box	No	-

Examples

Different Sizes

Small Size

Medium Size

Large Size

Style Variations

Default Style

Inset Style

Rounded Style

Bordered Style

Custom Dimensions

Custom Width and Height

Blank Box