Skip to content

DividerSection

SM · 950B gzip budget

Content section with decorative divider between segments.

Category
Media & layout
Budget
sm, single-purpose control
External runtime
React / React DOM only
axe fixtureSSR rendersource scanbundle budget

Preview

Live fixture
Preview locale
or

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/divider-section.json

Copies the source into your project.

New here? Set up Tailwind and import aliases first →

Source & props

Edit on GitHub ↗

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

"use client";

import React from "react";

export interface DividerSectionProps {
  label?: string;
  ornament?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function DividerSection({
  label,
  ornament,
  className = "",
  style,
}: DividerSectionProps) {
  return (
    <div
      role="separator"
      aria-label={label}
      className={className}
      style={{
        display: "flex",
        alignItems: "center",
        gap: "1rem",
        paddingBlock: "2rem",
        ...style,
      }}
    >
      <div
        aria-hidden="true"
        style={{
          flex: 1,
          height: "1px",
          background: "var(--color-border, #e5e7eb)",
        }}
      />

      {ornament ?? (
        <span
          style={{
            fontSize: "0.75rem",
            textTransform: "uppercase",
            letterSpacing: "0.1em",
            color: "var(--color-muted, #9ca3af)",
            fontWeight: 500,
            whiteSpace: "nowrap",
          }}
        >
          {label}
        </span>
      )}

      <div
        aria-hidden="true"
        style={{
          flex: 1,
          height: "1px",
          background: "var(--color-border, #e5e7eb)",
        }}
      />
    </div>
  );
}

What CI checks

Quality contract
  • Bundled, minified and gzipped against its tier budget
  • Audited by axe in the state previewed above
  • Rendered through react-dom/server with no browser globals
  • Scanned for network calls, dangerous sinks, and unguarded animation
← All components