Box

A lightweight layout container with an sl (style layer) prop — a flexible alternative to MUI sx.
Supports objects, arrays, and functions with theme access, nested selectors, responsive breakpoints, and spacing shorthands.

Import

import { Box } from "@libdev-ui/base";

Demo

Hello Box

Usage

TypeScript

import React from "react";
import { Box } from "@libdev-ui/base";

export default function Example(): JSX.Element {
  return (
    <Box
      component="section"
      sl={{
        p: 2, // 2 * 8 = 16px
        borderRadius: "var(--radius-md)",
        backgroundColor: "#999",
        color: "#fff",
        "&:hover": { opacity: 0.9 },
      }}
    >
      Hello Box
    </Box>
  );
}

JavaScript

import React from "react";
import { Box } from "@libdev-ui/base";

export default function Example() {
   return (
   
    <Box
      p={{ xs: 8, md: 16 }}
      style={{ border: "1px dashed #999", borderRadius: 8 }}
    >
      <Flex
        direction={{ xs: "column", md: "row" }}
        gap={{ xs: 8, md: 16 }}
        align={{ xs: "stretch", md: "center" }}
        justify={{ md: "between" }}
      >
        <Box sl={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
        <Box sl={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
        <Box sl={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
        <Box sl={{ width: 64, height: 64, background: "#3b82f6", borderRadius: 8 }} />
      </Flex>
    </Box>
 
  );
}

Responsive

TypeScript

import { Box } from "@libdev-ui/base";

export default function ResponsiveDemo(): JSX.Element {
  return (
    <Box
      sl={[
        { p: 1, 
        backgroundColor: "#999",
        color: "#fff", },
        { sm: { p: 2 }, md: { p: 3 }, lg: { p: 4 } },
      ]}
    >
      Responsive paddings
    </Box>
  );
}

JavaScript

import { Box } from "@libdev-ui/base";

export default function ResponsiveDemo() {
  return (
    <Box
      sl={[
        { p: 1,
        backgroundColor: "#999",
        color: "#fff", },
        { sm: { p: 2 }, md: { p: 3 }, lg: { p: 4 } },
      ]}
    >
      Responsive paddings
    </Box>
  );
}

Nested selectors & theme

TypeScript

import { Box } from "@libdev-ui/base";

export default function NestedDemo(): JSX.Element {
  return (
    <Box
      sl={({ theme }) => ({
        p: 2,
        [theme.breakpoints.up("md")]: { p: 4 },
        "& > *": { m: 1 },
      })}
    >
      <div>child 1</div>
      <div>child 2</div>
    </Box>
  );
}

JavaScript

import { Box } from "@libdev-ui/base";

export default function NestedDemo() {
  return (
    <Box
      sl={({ theme }) => ({
        p: 2,
        [theme.breakpoints.up("md")]: { p: 4 },
        "& > *": { m: 1 },
      })}
    >
      <div>child 1</div>
      <div>child 2</div>
    </Box>
  );
}

---

Props

Prop	Type	Default	Description
component	ElementType	"div"	HTML element or React component for the root.
sl	SlProp	—	Style layer: object, array, or function with theme context.
children	React.ReactNode	—	Box children.
className	string	—	Custom class.
style	React.CSSProperties	—	Inline styles merged after sl.
...rest	HTMLAttributes<HTMLElement>	—	Any valid HTML attributes for the root element.

If you see an error like “Expected component TabItem to be defined”, ensure both Tabs and TabItem imports exist at the top of this page.

Notes

• Spacing shorthands (p, m, px, py, pt, pr, pb, pl, mx, my, mt, mr, mb, ml) accept numbers that pass through theme.spacing(n) (default: n * 8).
• Breakpoints xs | sm | md | lg | xl map to @media (min-width: …px) according to the theme.
• All colors/radii come from global CSS variables (:root), e.g., --color-primary, --radius-md.