Grid

Tokens

Components

Motion

Themes

Icons

Layout

Import

import { Grid, GridItem } from "@pelagornis/page/components";

Example

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

src/components/GridExample.tsx

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

const items = ["Tokens", "Components", "Motion", "Themes", "Icons", "Layout"];

export default function GridDemo() {
  return (
    <Grid minItem="foundationSize2560" gap="sizeMedium" className="w-full">
      {items.map((item) => (
        <GridItem key={item}>
          <Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">
            <Text variant="subtitleMd">{item}</Text>
          </Box>
        </GridItem>
      ))}
    </Grid>
  );
}

Use in MDX

Grid 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 { Grid } from "@pelagornis/page/components";

<Grid columns={3} gap="sizeMedium">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</Grid>

Use in Markdoc

pageMarkdoc() registers a grid 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

{% grid columns=3 gap="sizeMedium" %}
One

Two

Three
{% /grid %}

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	grid
item	grid-item

Reference

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