Divider

Above the line

Or continue with

Below the line

Import

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

Example

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

src/components/DividerExample.tsx

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

export default function DividerDemo() {
  return (
    <Stack gap="sizeLarge" className="w-full">
      <Text variant="bodyMd">Above the line</Text>
      <Divider />
      <Divider layout="content" align="center">
        Or continue with
      </Divider>
      <Text variant="bodyMd">Below the line</Text>
    </Stack>
  );
}

Use in MDX

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

<Divider />

<Divider layout="content" align="center">Or continue with</Divider>

Use in Markdoc

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

{% divider /%}

{% divider layout="content" align="center" %}Or continue with{% /divider %}

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

Variants

Values the component accepts for each variant prop.

Prop	Values
layout	default content icon

Anatomy

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

Part	Role
root	divider

Reference

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