Horizontal Ruler Component

Add elegant, animated section dividers to your Astro MDX blog posts. Perfect for separating sections or adding visual breaks.

📦 Import the Components

1
import HorizontalRuler from "@/react/HorizontalRuler/HorizontalRuler.jsx";

or with relative path:

1
import HorizontalRuler from "../../react/HorizontalRuler/HorizontalRuler.jsx";

Important: Use .mdx extension (not .md) when working with React components.

🚀 Basic Usage

Simply add the component anywhere in your MDX:

1
<HorizontalRuler />

That’s it! The ruler automatically adapts to your site’s theme (light/dark mode).

🎨 Variants

Choose from 6 beautiful styles:

Flowers (Default)

1
<HorizontalRuler variant="flowers" />

Delicate floral design with 🌸🌼🌺🌻🌷

Stars

1
<HorizontalRuler variant="stars" />

Celestial theme with ⭐✨💫🌟

Hearts

1
<HorizontalRuler variant="hearts" />

Colorful hearts with 💚💛💙💜

Geometric

1
<HorizontalRuler variant="geometric" />

Clean geometric shapes with ◆◇

Dots

1
<HorizontalRuler variant="dots" />

Minimalist dot pattern

Minimal

1
<HorizontalRuler variant="minimal" />

Ultra-minimal dash style

📏 Sizes

Control the height and icon size:

Small

1
<HorizontalRuler size="small" />

Medium (Default)

1
<HorizontalRuler size="medium" />

Large

1
<HorizontalRuler size="large" />

📐 Spacing

Adjust the vertical spacing around the ruler:

Tight

1
<HorizontalRuler spacing="tight" />

Less vertical space (20px top/bottom)

Normal (Default)

1
<HorizontalRuler spacing="normal" />

Standard spacing (40px top/bottom)

Loose

1
<HorizontalRuler spacing="loose" />

More vertical space (60px top/bottom)

🎨 Custom Colors

Auto Color (Default)

Adapts to theme automatically:

1
<HorizontalRuler color="auto" />

Custom Colors

1
<HorizontalRuler color="#ec4899" variant="hearts" />

1
<HorizontalRuler color="#3b82f6" variant="stars" />

1
<HorizontalRuler color="#8b5cf6" variant="geometric" />

⚙️ Props Reference

💡 Usage Examples

Blog Post Header

Use after the title to separate header from content:

1
---
2
title: "My Awesome Blog Post"
3
---
4

5
# My Awesome Blog Post
6

7
<HorizontalRuler variant="flowers" spacing="tight" />
8

9
Your blog content starts here...

Section Dividers

Separate major sections in long posts:

1
## Introduction
2

3
Content here...
4

5
<HorizontalRuler variant="stars" />
6

7
## Main Content
8

9
More content...
10

11
<HorizontalRuler variant="stars" />
12

13
## Conclusion
14

15
Final thoughts...

End of Post

Mark the end of your blog post:

1
Thanks for reading!
2

3
<HorizontalRuler variant="hearts" size="large" />
4

5
*Published on October 22, 2025*

Combine with Other Components

Works great with other components:

1
<Tabs defaultValue="tab1" client:load>
2
  <TabItem value="tab1" label="First">
3
    Content...
4
  </TabItem>
5
</Tabs>
6

7
<HorizontalRuler variant="geometric" spacing="loose" />
8

9
<Dropdown client:load>
10
  <DropdownOption value="opt1" label="Option">
11
    Content...
12
  </DropdownOption>
13
</Dropdown>

🎯 Design Tips

1. Match Your Theme

Choose variants that complement your blog’s aesthetic:

• Modern/Tech blogs: geometric or minimal
• Creative/Art blogs: flowers or stars
• Personal blogs: hearts or flowers
• Professional blogs: dots or minimal

2. Consistent Usage

Pick 1-2 variants and use them consistently throughout your blog for a cohesive look.

3. Size Matters

• Headers: Use size="small" with spacing="tight"
• Section breaks: Use size="medium" with spacing="normal"
• Dramatic breaks: Use size="large" with spacing="loose"

4. Color Coordination

Let the ruler use color="auto" to match your theme, or set custom colors to match your brand.

✨ Features

• ✅ Auto theme detection - Adapts to light/dark mode
• ✅ Smooth animations - Gentle floating effect
• ✅ Fully customizable - Variants, sizes, spacing, colors
• ✅ Responsive - Works on all screen sizes
• ✅ Zero dependencies - Pure React
• ✅ Lightweight - Minimal performance impact

🎨 Creative Combinations

Mix different props for unique styles:

📝 Quick Reference

Common Patterns

1
// After title
2
<HorizontalRuler variant="flowers" spacing="tight" />
3

4
// Between sections
5
<HorizontalRuler variant="stars" />
6

7
// End of post
8
<HorizontalRuler variant="hearts" size="large" />
9

10
// Minimal divider
11
<HorizontalRuler variant="minimal" size="small" />
12

13
// Custom themed
14
<HorizontalRuler variant="geometric" color="#3b82f6" />

🎉 Start Using Today!

Add beautiful, animated section dividers to your Astro MDX blog posts with just one line of code. Perfect for creating visual hierarchy and improving readability.

Happy blogging! ✨