Docs Kickstarter

Divider

A divider is a thin line that groups content in lists and layouts. It can be used to visually separate content into clear groups.

Basic Usage

Here’s a simple horizontal divider:

Text above the divider

Text below the divider

import { Divider } from "@/components/ui/divider"

<div className="space-y-4">
  <p>Text above the divider</p>
  <Divider />
  <p>Text below the divider</p>
</div>

Component Implementation

Here’s how to implement the Divider component:

// components/ui/divider.tsx
import * as React from "react"
import { cn } from "@/lib/utils"

interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "horizontal" | "vertical"
}

export function Divider({ 
  orientation = "horizontal", 
  className,
  ...props 
}: DividerProps) {
  return (
    <div
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
}

Vertical Divider

Use vertical orientation for side-by-side content:

Left
Right
<div className="flex h-8 items-center space-x-4">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

With Text

Create a divider with text in the middle:

OR

<div className="relative">
  <Divider className="my-8" />
  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-muted-foreground">
    OR
  </span>
</div>

In Cards

Use dividers to separate card sections:

Card Header

Some content here.

Card Footer

More content here.

<Card>
  <div className="p-6">
    <h3>Card Header</h3>
    <p>Some content.</p>
  </div>
  <Divider />
  <div className="p-6">
    <h3>Card Footer</h3>
    <p>More content.</p>
  </div>
</Card>

Custom Styling

Customize the appearance using Tailwind classes:

// Thicker divider
<Divider className="border-t-2" />

// Colored divider
<Divider className="bg-primary" />

// Dashed divider
<Divider className="border-dashed" />

// Gradient divider
<Divider className="h-px bg-gradient-to-r from-transparent via-foreground to-transparent" />

In Lists

Use dividers in lists to separate items:

  • First Item
  • Second Item
  • Third Item
<ul className="space-y-4">
  <li>First Item</li>
  <Divider />
  <li>Second Item</li>
  <Divider />
  <li>Third Item</li>
</ul>

Best Practices

  1. Spacing

    • Use consistent margin/padding
    • Consider content hierarchy
    • Maintain visual rhythm

  2. Visual Design

    • Keep dividers subtle
    • Use appropriate color contrast
    • Consider dark mode

  3. Accessibility

    • Use semantic HTML when possible
    • Consider screen readers
    • Maintain proper contrast

  4. Responsive Design

    • Adjust spacing on different screens
    • Consider mobile views
    • Handle orientation changes

  5. Implementation

    • Keep the component simple
    • Use CSS custom properties
    • Consider reusability