Separator

Visually or semantically separates content.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Installation

Install the following dependencies

npm install @radix-ui/react-separator

Copy and paste the following code into your project

import { styled } from '@styled-system/jsx'
import { type SeparatorVariantProps, separator } from '@styled-system/recipes'
 
export type SeparatorProps = SeparatorVariantProps & React.HTMLAttributes<HTMLDivElement>
 
const Component = styled('div', separator)
 
export const Separator = (props: SeparatorProps) => {
  return <Component {...props} />
}

Update the import paths to match your project setup

Usage

import { Separator } from '@/components/ui/separator'

<Separator />

Examples

Orientation

Horizontal (Default)

Vertical

Before

After

Types

Solid (Default)

Dotted

Dashed

Rounded

Default

Rounded

Combined Variants

Dotted & Rounded

Dashed & Rounded

Vertical & Dotted

Before

After