Box

Surface box with large padding

Outlined section

Import

import { Box } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/BoxExample.tsx

import { Box, Stack, Text } from "@pelagornis/page/components";

export default function BoxDemo() {
  return (
    <Stack gap="sizeMedium" className="w-full">
      <Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">
        <Text variant="bodyMd">Surface box with large padding</Text>
      </Box>
      <Box
        as="section"
        paddingX="sizeLarge"
        paddingY="sizeSmall"
        border="strokeWidthThin"
        borderColor="borderDefault"
        radius="roundedLarge"
      >
        <Text variant="bodyMd">Outlined section</Text>
      </Box>
    </Stack>
  );
}

Use in MDX

Box can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { Box } from "@pelagornis/page/components";

<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">
  Surface box
</Box>

Use in Markdoc

pageMarkdoc() registers a box tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge" %}
Surface box
{% /box %}

Attributes use the same names and values as the React props.

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	box

Reference

• RefineUI · Box for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.