Separator
Visually divide content sections
Completeness: styles-sufficient
The stylesheet is the whole component. There is no keyboard map beyond what the native element already does and nothing sets state at runtime that the CSS keys on, so a CSS-only port reproduces it.
Import
import { Separator } from '@blakeui/react';Usage
blakeUI Components
Beautiful, fast and modern React UI library.
import {Separator} from "@blakeui/react";
export function Basic() {
return (
<div className="max-w-md">Vertical
import {Separator} from "@blakeui/react";
export function Vertical() {
return (
<div className="text-small flex h-5 items-center space-x-4">With Content
Set Up Notifications
Receive account activity updates
Set up Browser Extension
Connect your browser to your account
Mint Collectible
Create your first collectible
import {Separator} from "@blakeui/react";
const items = [
{
iconUrl: "https://cdn.blakeui.com/docs/3dicons/bell-small.png",Variants
import {Separator} from "@blakeui/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.
Default Surface
Surface Content
Secondary Surface
Surface Content
Tertiary Surface
Surface Content
Transparent Surface
Surface Content
import {Separator, Surface} from "@blakeui/react";
export function WithSurface() {
return (
<div className="flex flex-col gap-8">Custom Render Function
blakeUI Components
Beautiful, fast and modern React UI library.
"use client";
import {Separator} from "@blakeui/react";
export function CustomRenderFunction() {Styling
Passing Tailwind CSS classes
import {Separator} from '@blakeui/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.
A worked example is in Styling.
blakeUI 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. |
