Divider

A flexible separator component for visually dividing content sections

Basic Horizontal

Content above

Content below

Thickness Variants

Thin

Medium

Thick

Style Variants

Solid

Dashed

Dotted

With Labels

Section one content

OR

Section two content

Login form

Continue with

Social login buttons

Spacing Options

Content

Small spacing

Medium spacing

Large spacing

Vertical Dividers

Item 1Item 2Item 3Item 4
Divider Component
tsx
1import React from "react";
2import { cn } from "@/lib/cn";
3

4interface DividerProps {
5  orientation?: "horizontal" | "vertical";
6  variant?: "solid" | "dashed" | "dotted";
7  thickness?: "thin" | "medium" | "thick";
8  spacing?: "none" | "sm" | "md" | "lg";
9  label?: string;
10  className?: string;