Separator
Visually divide content sections
Import
import { Separator } from '@darkcode-ui/react';Usage
import {Separator} from "@darkcode-ui/react";
export function Basic() {
return (
<div className="max-w-md">Vertical
import {Separator} from "@darkcode-ui/react";
export function Vertical() {
return (
<div className="text-small flex h-5 items-center space-x-4">With Content
import {Separator} from "@darkcode-ui/react";
const items = [
{
iconUrl: "https://darkcode-ui-assets.darkcode.dev/docs/3dicons/bell-small.png",Variants
import {Separator} from "@darkcode-ui/react";
export function Variants() {
return (
<div className="flex max-w-md flex-col items-center gap-3">With Surface
The Separator component adapts to different surface backgrounds for better visibility.
import {Separator, Surface} from "@darkcode-ui/react";
export function WithSurface() {
return (
<div className="flex flex-col gap-8">Custom Render Function
"use client";
import {Separator} from "@darkcode-ui/react";
export function CustomRenderFunction() {Styling
Passing Tailwind CSS classes
import {Separator} from '@darkcode-ui/react';
function CustomSeparator() {
return (
<Separator className="my-8 bg-linear-to-r from-transparent via-default-500 to-transparent" />
);
}Customizing the component classes
To customize the Separator component classes, you can use the @layer components directive.
Learn more.
@layer components {
.separator {
@apply bg-accent h-[2px];
}
.separator--vertical {
@apply bg-accent w-[2px];
}
}DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Separator component uses these CSS classes (View source styles):
Base & Orientation Classes
.separator- Base separator styles with default horizontal orientation.separator--horizontal- Horizontal orientation (full width, 1px height).separator--vertical- Vertical orientation (full height, 1px width)
Variant Classes
.separator--default- Default variant with standard contrast.separator--secondary- Secondary variant with medium contrast.separator--tertiary- Tertiary variant with subtle contrast
API Reference
Separator Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator |
variant | 'default' | 'secondary' | 'tertiary' | 'default' | The visual variant of the separator |
className | string | - | Additional CSS classes |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined> | - | Overrides the default DOM element with a custom render function. |
