Styleframe Logo
Structure

Horizontal Rule Element

Style horizontal rule elements with configurable border color, width, style, and margin using the useHrElement composable.
Part of the Global Preset:useHrElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's hr option. For most projects, applying it via the preset is the recommended approach.

Overview

The useHrElement composable styles the hr element as a top-border-only divider with configurable border properties and vertical margin. It zeroes out the right, bottom, and left borders for a clean single-line separator.

useHrElement

function useHrElement(
    s: Styleframe,
    options?: WithThemes<HrElementConfig>
): HrElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useHrElement } from '@styleframe/theme';

const s = styleframe();

const {
    hrBorderColor,
    hrBorderWidth,
    hrBorderStyle,
    hrMargin,
} = useHrElement(s);

export default s;

Default Values

OptionDefaultVariableExport
borderColor"@color.gray-200"--hr--border-colorhrBorderColor
borderWidth"@border-width"--hr--border-widthhrBorderWidth
borderStyle"solid"--hr--border-stylehrBorderStyle
margin"@spacing.lg"--hr--marginhrMargin

The margin variable controls both margin-top and margin-bottom. Horizontal margins are fixed at 0.

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useHrElement } from '@styleframe/theme';

const s = styleframe();

const { hrBorderColor, hrMargin } = useHrElement(s, {
    borderColor: '@color.gray-300',
    borderStyle: 'dashed',
    margin: '@spacing.xl',
});

export default s;

Best Practices

  • Use light border colors: The default @color.gray-200 provides a subtle divider that does not dominate the visual hierarchy.
  • Customize border color per-theme: Use theme overrides to adjust the border color for dark mode (e.g., @color.gray-700).
  • Use spacing tokens for margin: Reference @spacing.lg or @spacing.xl to keep divider spacing consistent with your layout system.

Address

Style address elements with configurable bottom margin using the useAddressElement composable.

Focus

Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.