Divider

A simple horizontal rule component with default and soft variants for separating content sections.

Preview

Default divider

import { Divider } from '@/registry/ui-kit/tailwind-divider/react'

function Example() {
  return (
    <div>
      <p>Content above</p>
      <Divider />
      <p>Content below</p>
    </div>
  )
}

Soft divider

import { Divider } from '@/registry/ui-kit/tailwind-divider/react'

function Example() {
  return (
    <div>
      <p>Content above</p>
      <Divider soft />
      <p>Content below</p>
    </div>
  )
}

Component API

Prop	Default	Description
`soft`	`false`	Use a lighter, more subtle divider color.
`className`	`""`	Additional CSS classes.

Source Code

"use client";

import { forwardRef } from "react";

/* ── Divider ── */

interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
  soft?: boolean;
  className?: string;
}

const Divider = forwardRef<HTMLHRElement, DividerProps>(
  ({ soft = false, className = "", ...props }, ref) => {
    return (
      <hr
        ref={ref}
        className={`w-full border-t ${
          soft
            ? "border-zinc-100 dark:border-zinc-800/50"
            : "border-zinc-200 dark:border-zinc-800"
        } ${className}`}
        {...props}
      />
    );
  }
);
Divider.displayName = "Divider";

export { Divider };
export default Divider;