Divider
Dividers are used to visually separate content in a UI.
Source Code
"use client";
import { cn } from "@/lib/utils";
interface DividerProps extends React.ComponentPropsWithRef<"div"> {
orientation?: "horizontal" | "vertical";
decorative?: boolean;
}
const Divider = ({
className,
orientation = "horizontal",
decorative,
...props
}: DividerProps) => {
// https://github.com/radix-ui/primitives/blob/main/packages/react/separator/src/Separator.tsx
// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
const ariaOrientation = orientation === "vertical" ? orientation : undefined;
const semanticProps = decorative
? { role: "none" }
: { "aria-orientation": ariaOrientation, role: "separator" };
return (
<div
className={cn(
"bg-border shrink-0",
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
className
)}
{...semanticProps}
{...props}
/>
);
};
export { Divider };
Features
- Multiple Orientations: Supports both horizontal and vertical layouts
- Semantic or Decorative: Can be used as a semantic separator or purely decorative element
- Accessible: Proper ARIA attributes for semantic dividers
API Reference
Prop | Default | Type | Description |
---|---|---|---|
| - |
| The orientation of the divider. |
| - |
| Whether the divider is decorative. Doesn't add aria-orientation or role. |
Examples
Horizontal
Basic usage showing a horizontal divider.
Vertical
Example of a vertical divider between elements.
Best Practices
-
Semantic Usage:
- Use semantic dividers when separating distinct sections
- Use decorative dividers for visual separation only
-
Spacing:
- Maintain consistent spacing around dividers
- Consider using margins instead of dividers for simple spacing
-
Visual Design:
- Keep dividers subtle and not too prominent
- Ensure sufficient contrast with background