Divider

Separate content horizontally.

Installation

Add component:

Copy and paste the code into your project’s component directory. Do not forget to update the import paths.

// Tremor Divider [v0.0.2]
import React from "react"
import { cx } from "@/lib/utils"
type DividerProps = 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,      )}      tremor-id="tremor-raw"      {...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",            // background 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

1,587

Details

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.

import { Divider } from "@/components/Divider"
export function DividerExample() {  return (    <>      <p className="text-sm text-gray-500 dark:text-gray-500">Tickets Sold</p>      <p className="text-3xl font-semibold text-gray-900 dark:text-gray-50">        1,587      </p>      <Divider>Details</Divider>      <p className="mt-2 text-sm leading-7 text-gray-500 dark:text-gray-500">        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.      </p>    </>  )}

Example: Divider with button as child

A Button used as children inside a Divider.

import { Button } from "@/components/Button"import { Divider } from "@/components/Divider"
export const DividerButtonExample = () => (  <Divider>    <Button variant="secondary" className="rounded-full">      Show more    </Button>  </Divider>)

API Reference: Divider

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