Skip to Content
Dashflow Logo

Hr Component

A comprehensive guide to using the Hr component with examples, props, and best practices.

Overview

The Hr component provides a styled horizontal rule element for separating content sections. It's commonly used to create visual breaks between different parts of your content.

Basic Usage

import { Hr } from '@dashflowx/core'


export default function HrExample() {
  return (
    <div>
      <p>Content above</p>
      <Hr />
      <p>Content below</p>
    </div>
  )
}

Preview: <div> <p>Content above</p>

<p>Content below</p> </div>

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes for the horizontal rule

Examples

Basic Horizontal Rule

import { Hr } from '@dashflowx/core'


export default function BasicHr() {
  return (
    <div>
      <h2>Section 1</h2>
      <p>Content for section 1</p>
      <Hr />
      <h2>Section 2</h2>
      <p>Content for section 2</p>
    </div>
  )
}

Preview: <div> <h2>Section 1</h2> <p>Content for section 1</p>

<h2>Section 2</h2> <p>Content for section 2</p> </div>

Styled Horizontal Rule

import { Hr } from '@dashflowx/core'


export default function StyledHr() {
  return (
    <div>
      <h2>Section 1</h2>
      <p>Content for section 1</p>
      <Hr className="border-blue-500 border-2" />
      <h2>Section 2</h2>
      <p>Content for section 2</p>
    </div>
  )
}

Preview: <div> <h2>Section 1</h2> <p>Content for section 1</p>

<h2>Section 2</h2> <p>Content for section 2</p> </div>

Custom Styled Horizontal Rule

import { Hr } from '@dashflowx/core'


export default function CustomStyledHr() {
  return (
    <div>
      <h2>Section 1</h2>
      <p>Content for section 1</p>
      <Hr className="border-green-500 border-4 my-8" />
      <h2>Section 2</h2>
      <p>Content for section 2</p>
    </div>
  )
}

Preview: <div> <h2>Section 1</h2> <p>Content for section 1</p>

<h2>Section 2</h2> <p>Content for section 2</p> </div>

Gradient Horizontal Rule

import { Hr } from '@dashflowx/core'


export default function GradientHr() {
  return (
    <div>
      <h2>Section 1</h2>
      <p>Content for section 1</p>
      <Hr className="border-0 h-1 bg-gradient-to-r from-blue-500 to-purple-600" />
      <h2>Section 2</h2>
      <p>Content for section 2</p>
    </div>
  )
}

Preview: <div> <h2>Section 1</h2> <p>Content for section 1</p>

<h2>Section 2</h2> <p>Content for section 2</p> </div>

Common Use Cases

Section Separator

const sectionSeparator = (
  <div>
    <h2>Introduction</h2>
    <p>Introduction content</p>
    <Hr />
    <h2>Main Content</h2>
    <p>Main content</p>
  </div>
);

Article Divider

const articleDivider = (
  <div>
    <h1>Article Title</h1>
    <p>Article introduction</p>
    <Hr />
    <h2>Article Body</h2>
    <p>Article content</p>
  </div>
);

Form Section Divider

const formDivider = (
  <div>
    <h3>Personal Information</h3>
    <input type="text" placeholder="Name" />
    <Hr />
    <h3>Contact Information</h3>
    <input type="email" placeholder="Email" />
  </div>
);

List Separator

const listSeparator = (
  <div>
    <h3>Category 1</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <Hr />
    <h3>Category 2</h3>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
);

Best Practices

1. Semantic Usage

Use horizontal rules to separate semantically different content.

// ✅ Good - Semantic separation
<h2>Introduction</h2>
<p>Introduction content</p>
<Hr />
<h2>Main Content</h2>
<p>Main content</p>


// ❌ Avoid - Decorative use
<p>Paragraph 1</p>
<Hr />
<p>Paragraph 2</p>

2. Consistent Spacing

Use consistent spacing around horizontal rules.

// ✅ Good - Consistent spacing
<Hr className="my-8" />


// ❌ Avoid - Inconsistent spacing
<Hr className="my-2" />
<Hr className="my-12" />

3. Appropriate Styling

Use styling that matches your design system.

// ✅ Good - Consistent styling
<Hr className="border-gray-200" />


// ❌ Avoid - Random styling
<Hr className="border-red-500 border-8" />

4. Accessibility

Ensure horizontal rules are accessible to screen readers.

// ✅ Good - Accessible
<Hr />


// ❌ Avoid - Hidden from screen readers
<Hr className="sr-only" />

5. Responsive Design

Use responsive spacing for different screen sizes.

// ✅ Good - Responsive spacing
<Hr className="my-4 md:my-8" />


// ❌ Avoid - Fixed spacing
<Hr className="my-8" />

Customization

Custom Styling

You can customize the horizontal rule appearance using CSS classes:

<Hr className="border-2 border-blue-500 my-12" />

Different Themes

Use different themes for different contexts:

// Light theme
<Hr className="border-gray-200" />


// Dark theme
<Hr className="border-gray-700" />


// Brand theme
<Hr className="border-blue-500" />

Size Variations

Use different sizes for different emphasis levels:

// Thin line
<Hr className="border-t border-gray-200" />


// Medium line
<Hr className="border-t-2 border-gray-200" />


// Thick line
<Hr className="border-t-4 border-gray-200" />

Advanced Usage

Dynamic Styling

Apply dynamic styling based on conditions:

const [isActive, setIsActive] = useState(false);


<Hr className={`${isActive ? 'border-blue-500' : 'border-gray-200'}`} />

Conditional Rendering

Show horizontal rules conditionally:

{showSeparator && <Hr />}

Custom Components

Create custom horizontal rule components:

const CustomHr = ({ color, thickness }) => (
  <Hr className={`border-${thickness} border-${color}`} />
);
  • Separator: For more flexible separators
  • Divider: For content dividers
  • Spacer: For spacing elements
  • Card: For content containers
  • Section: For content sections

API Reference

For the complete API reference and advanced usage patterns, see the Hr API documentation.

Edit this page on GitHub
previousH6