Box

Layout

Generic styled container with padding and border.

Preview

A simple styled container box.

Supports all standard div props and className.

Usage

example.jsx

import { Box } from "@/components/ui/box";

export default function Example() {
  return <Box />;
}

Source Code

Copy this file into components/ui/box.jsx in your project.

box.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Box = forwardRef(({ className, as: Component = "div", ...props }, ref) => (
  <Component ref={ref} className={cn(className)} {...props} />
));
Box.displayName = "Box";

export { Box };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge