Box

Overview

Box is a flexible layout component for wrapping content with customizable width, height, padding, background, border radius, and shadow. Use it for cards, containers, wrappers, and more.

Preview

Preview

Box Component

This is a general-purpose content box.

Small Box

Code

import { Box } from '@mindfiredigital/ignix-ui';

function BoxDemo() {
  return (
    <div className="flex items-center gap-8">
      <Box
        width="large"
        height="normal"
        padding="lg"
        background="white"
        rounded="lg"
        shadow="medium"
      >
        <h2 className="font-bold text-lg mb-2">Box Component</h2>
        <p>This is a general-purpose content box.</p>
      </Box>
      <Box
        width="small"
        height="lg"
        padding="sm"
        background="secondary"
        rounded="full"
        shadow="strong"
      >
        <span className="text-primary  font-semibold">Small Box</span>
      </Box>
    </div>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add box

yarn

yarn @mindfiredigital/ignix-ui add box

pnpm

pnpm @mindfiredigital/ignix-ui add box

manual

import React from "react";
import clsx from "clsx";

export type BoxProps = {
children: React.ReactNode;
width?: "auto" | "small" | "normal" | "large" | "full" | string;
height?: "auto" | "small" | "normal" | "large" | "screen" | string;
padding?: "none" | "sm" | "normal" | "lg";
background?: string;
rounded?: "none" | "sm" | "md" | "lg" | "full";
shadow?: "none" | "subtle" | "medium" | "strong";
className?: string;
};

const widthMap: Record<string, string> = {
auto: "w-auto",
small: "w-32",
normal: "w-64",
large: "w-96",
full: "w-full",
};
const heightMap: Record<string, string> = {
auto: "h-auto",
small: "h-16",
normal: "h-32",
large: "h-64",
screen: "h-screen",
};
const paddingMap: Record<string, string> = {
none: "p-0",
sm: "p-2",
normal: "p-4",
lg: "p-8",
};
const roundedMap: Record<string, string> = {
none: "rounded-none",
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
full: "rounded-full",
};
const shadowMap: Record<string, string> = {
none: "shadow-none",
subtle: "shadow-sm",
medium: "shadow-md",
strong: "shadow-lg",
};

const Box: React.FC<BoxProps> = ({
children,
width = "normal",
height = "auto",
padding = "normal",
background = "white",
rounded = "md",
shadow = "subtle",
className,
}) => {
const widthClass = widthMap[width] || width;
const heightClass = heightMap[height] || height;
const paddingClass = paddingMap[padding] || padding;
const roundedClass = roundedMap[rounded] || rounded;
const shadowClass = shadowMap[shadow] || shadow;
const bgClass = background ? `bg-${background}` : "";

return (
<div
  className={clsx(
    widthClass,
    heightClass,
    paddingClass,
    roundedClass,
    shadowClass,
    bgClass,
    className
  )}
>
  {children}
</div>
);
};

export { Box };

Usage

Import the component:

import { Box } from './components/ui';

Basic Usage

function BasicBox() {
  return (
    <Box
      width="full"
      padding="normal"
      background="white"
      rounded="md"
      shadow="subtle"
    >
      <h2>Box Component</h2>
      <p>This is a general-purpose content box.</p>
    </Box>
  );
}

Variants

Preview

Box Component Demo

width: normal, height: auto, padding: normal, background: white, rounded: md, shadow: subtle

Code

    <Box
      width="normal"
      height="auto"
      padding="normal"
      background="white"
      rounded="md"
      shadow="subtle"
    >
      <h2>Box Component Demo</h2>
      <p>
        width: <b>normal</b>, height: <b>auto</b>, padding: <b>normal</b>, background: <b>white</b>, rounded: <b>md</b>, shadow: <b>subtle</b>
      </p>
    </Box>
    

Props

Prop	Type	Default	Description
width	string	"normal"	Width: "auto", "small", "normal", "large", "full", or custom
height	string	"auto"	Height: "auto", "small", "normal", "large", "screen", or custom
padding	string	"normal"	Padding: "none", "sm", "normal", "lg"
background	string	"white"	Background color (from theme or custom)
rounded	string	"md"	Border radius: "none", "sm", "md", "lg", "full"
shadow	string	"subtle"	Box shadow: "none", "subtle", "medium", "strong"
className	string		Additional CSS classes
children	node		Content inside the box

Use Cases

• Cards
• Content blocks
• Wrappers
• Styled containers