Separate content horizontally.


  1. 1

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Raw Divider [v0.0.0]
    import React from "react"
    import { cx } from "@/lib/utils"
    interface DividerProps extends React.ComponentPropsWithoutRef<"div"> {}
    const Divider = React.forwardRef<HTMLDivElement, DividerProps>(  ({ className, children, ...props }, forwardedRef) => (    <div      ref={forwardedRef}      className={cx(        // base        "mx-auto my-6 flex w-full items-center justify-between gap-3 text-sm",        // text color        "text-gray-500 dark:text-gray-500",        className,      )}      {...props}    >      {children ? (        <>          <div            className={cx(              // base              "h-[1px] w-full",              // background color              "bg-gray-200 dark:bg-gray-800",            )}          />          <div className="whitespace-nowrap text-inherit">{children}</div>          <div            className={cx(              // base              "h-[1px] w-full",              // background color              "bg-gray-200 dark:bg-gray-800",            )}          />        </>      ) : (        <div          className={cx(            // base            "h-[1px] w-full",            // backround color            "bg-gray-200 dark:bg-gray-800",          )}        />      )}    </div>  ),)
    Divider.displayName = "Divider"
    export { Divider };

Example: Divider with text content

Place content inside a Divider to visually group it.

Tickets Sold



Ticket sales peaked in March, largely due to the "March Mountain Madness" event on March 12th, drawing significant tourist interest. Operational efficiencies and local hotel partnerships further boosted sales. Additionally, targeted social media promotions ahead of the event significantly increased online bookings.

Example: Divider with button as child

A Button used as children inside a Divider.

API Reference: Divider

This component is based on the div element and supports all of its props.