Horizontal Rule

Styled dividers for content sections

Installation

npx @ravikumarsurya/mdx-ui add horizontal-rule

Create a horizontal rule using three or more hyphens, asterisks, or underscores:

---
---
 
---

All three syntaxes render the same horizontal rule.

default

dashed

dotted

gradient

## First Section
 
Content for the first section.
 
---
 
## Second Section
 
Content for the second section.

Here's some important information.
 
---
 
And here's some more context below.

# Document Title
 
Introduction text.
 
---
 
## Main Content
 
The main content goes here.
 
---
 
## Conclusion
 
Final thoughts and summary.

The horizontal rule has default spacing and styling that works well in most contexts. It uses theme colors and adapts to light/dark modes.

You can customize the horizontal rule through your MDX component mappings:

import { Hr } from "@/components/mdx-ui/horizontal-rule";
 
export const mdxComponents = {
  hr: Hr,
};

On This Page