Display

Separator

Visual divider — horizontal or vertical.

Available inreactangular

Preview

Live previewreal component

github-mcp

Configure transport and exposed scopes.

stdio

14 tools

3 scopes

Install

TerminalBash

$ npx mcp-elements add separator

Usage

separator-example.tsxTSX

import { Separator } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="space-y-3">
      <p className="text-sm font-medium">Server settings</p>
      <Separator />
      <p className="text-sm text-muted-foreground">Configure transport and scopes.</p>
    </div>
  )
}

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis the separator is drawn along
`className`	`string`	—	Additional classes for the separator element