Folio

Components

Box

A layout primitive for controlled padding, background, and border composition. Replaces raw divs with inconsistent inline utilities. Box is Folio-only: it lives in components/folio, not components/shadcn.

Preview

Box with p="md" bg="default" border radius="md"

Backgrounds

default

<Box bg="default" p="md" border radius="md" />

subtle

<Box bg="subtle" p="md" border radius="md" />

secondary

<Box bg="secondary" p="md" border radius="md" />

accent

<Box bg="accent" p="md" border radius="md" />

danger

<Box bg="danger" p="md" border radius="md" />

success

<Box bg="success" p="md" border radius="md" />

warning

<Box bg="warning" p="md" border radius="md" />

Padding scale

p="xs"

p="sm"

p="md"

p="lg"

p="xl"

p="2xl"

API

Prop
Type
Default
Description
p"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Padding on all sides.
px"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Horizontal padding. Overrides p on the x axis.
py"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Vertical padding. Overrides p on the y axis.
bg"default" | "subtle" | "secondary" | "accent" | "inverse" | "danger" | "success" | "warning"—Background token. Maps to semantic bg-* utilities (bg-background, bg-muted, bg-primary-subtle, ...).
borderbooleanfalseAdds a border using border-border.
radius"none" | "sm" | "md" | "lg" | "xl" | "full"—Border radius. Maps to the Folio radius scale.
asReact.ElementType"div"Render as a different HTML element.

Don't and Do

Don't

Don't reach for a raw div with hardcoded palette utilities and inline spacing. Background and padding written that way are invisible to the token system and break on rebrand.

Do
// Box with Folio tokens
<Box p="md" bg="subtle" border radius="md">
  Content
</Box>

Usage

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

export function Example() {
  return (
    <Box p="md" bg="subtle" border radius="md">
      Content
    </Box>
  );
}

Folio v1.3 · June 2026