Text Divider

Default

The default text divider.

or continue with

Thin

A subtle 0.5px line.

Section Break

Thick

A bolder divider.

New Chapter

Rounded

Rounded edges for a softer look.

Options

Installation

Run the following command to add the text-divider component to your project using the Flow UI registry:

npx shadcn@latest add @flowui/text-divider

Install Utilities

Ensure you have the cn utility and class-variance-authority (cva) installed.

npm install class-variance-authority clsx tailwind-merge

Copy the Component

Create a new file named text-divider.tsx in your components folder (e.g., components/ui/text-divider.tsx) and copy the code below.

components/ui/text-divider.tsx

import { cn } from "@/lib/utils";
import { cva } from "class-variance-authority";

type CommonProps = {
    variant?: "default" | "thin" | "thick" | "rounded";
    lineColor?: string;
}

type LineProps = CommonProps;

type TextDividerProps = {
    text: string;
    className?: string;
} & CommonProps;

const dividerVariants = cva(
    "w-1/2",
    {
        variants: {
            variant: {
                default: "h-px",
                thin: "h-[0.5px]",
                thick: "h-2",
                rounded: "h-px rounded-full",
            }
        },
        defaultVariants: {
            variant: "default",
        }
    }
);

const Line = (
    { variant, lineColor = "bg-border" } : LineProps
) => {
    return (
        <div
            aria-hidden="true"
            className={cn(
                dividerVariants({ variant }),
                lineColor
            )}
        />
    )
}

const TextDivider = ({
    variant = "default",
    text,
    lineColor,
    className
} : TextDividerProps) => {
    return (
        <div className={cn("flex items-center gap-2", className)}>
            <Line variant={variant} lineColor={lineColor} />
            <span>{text}</span>
            <Line variant={variant} lineColor={lineColor} />
        </div>
    )
}

export default TextDivider;

Basic Usage

import TextDivider from "@/components/ui/text-divider";

export function BasicExample() {
  return (
    <div className="w-full">
      <TextDivider text="OR" />
    </div>
  )
}

Custom Colors

Section Break

Alert

import TextDivider from "@/components/ui/text-divider";

export function ColorExample() {
  return (
    <div className="flex flex-col gap-8 w-full">
      <TextDivider 
        text="Section Break" 
        lineColor="bg-blue-500/50" 
        variant="rounded"
      />
      <TextDivider 
        text="Alert" 
        lineColor="bg-red-500/50" 
        variant="thick"
      />
    </div>
  )
}

Advanced Styling

Chapter One

import TextDivider from "@/components/ui/text-divider";

export function StylingExample() {
  return (
    <div className="w-full">
      <TextDivider 
        text="Chapter One" 
        className="text-primary font-bold uppercase tracking-widest text-xs"
        lineColor="bg-primary/20"
      />
    </div>
  )
}

Props

The TextDivider component accepts the following props:

Prop	Type	Default	Description
`text`	`string`	-	The text to display in the middle of the divider.
`variant`	`"default" \| "thin" \| "thick" \| "rounded"`	`"default"`	The style of the divider line.
`lineColor`	`string`	`"bg-border"`	The background color utility class for the divider lines.
`className`	`string`	-	Additional CSS classes for the container (e.g., margins, text styling).

Design Tip

Use the lineColor prop with transparency (e.g., bg-primary/20) to create subtle, professional-looking dividers that don't distract from the main content.