Box

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

Box Component Demo

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

Code

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

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

Installation

CLI

ignix add component 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 '@ignix-ui/box';

Basic Usage

function BasicBox() {
  return (
    <Box
      width="full"
      padding="normal"
      background="default"
      rounded="md"
      shadow="subtle"
    >
      <h2>Box Component</h2>
      <p>This is a general-purpose content box.</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	null	Additional CSS classes
children	node	null	Content inside the box