Mcoli UI - MC Separator

Overview

The mc-separator component provides a lightweight visual boundary between related pieces of UI. It is built on top of @base-ui/react separator primitives and styled with MicroClub design tokens.

Use it for section dividers, grouped inline content, menus, and split layouts. It also supports a size prop to control separator length.

Preview

MicroClub UI

A simple content block separated by a divider.

Separators help create visual rhythm and improve scannability in dense interfaces.

import { McSeparator } from '../ui/mc-separator';export default function McSeparatorDemo() {  return (    <div className="flex max-w-sm flex-col gap-4 text-sm">      <div className="flex flex-col gap-1.5">        <div className="leading-none font-medium">MicroClub UI</div>        <div className="text-muted-foreground">A simple content block separated by a divider.</div>      </div>      <McSeparator />      <div>Separators help create visual rhythm and improve scannability in dense interfaces.</div>    </div>  );}

Add to Your Project

Deploy mc-separator directly into your components/ui folder:

npx mcoli-ui@latest add mc-separator

pnpm dlx mcoli-ui@latest add mc-separator

yarn dlx mcoli-ui@latest add mc-separator

bunx mcoli-ui@latest add mc-separator

Manual Setup

If you prefer manual installation:

Install dependencies

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy component source

'use client';import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';import { cn } from '@/lib/utils';type McSeparatorProps = SeparatorPrimitive.Props & {  size?: number;};export default function McSeparator({  className,  orientation = 'horizontal',  size,  ...props}: McSeparatorProps) {  const isVertical = orientation === 'vertical';  return (    <div className={cn('w-fit', isVertical ? 'h-full' : 'w-full')}>      <SeparatorPrimitive        data-slot="separator"        orientation={orientation}        style={{          [isVertical ? 'height' : 'width']: size ? `${size}px` : undefined,        }}        className={cn(          'shrink-0 border border-border',          isVertical ? 'w-[1px]' : 'h-[1px]',          className        )}        {...props}      />    </div>  );}export { McSeparator };

Adjust utility imports

Ensure @/lib/utils (or your local classname helper) is correctly mapped.

Usage

import { McSeparator } from '@/components/ui/mc-separator';

export default function Example() {
  return (
    <div className="space-y-4">
      <p>Section A</p>
      <McSeparator />
      <p>Section B</p>
    </div>
  );
}

Examples

Vertical Separator

<div className="flex h-8 items-center">
  <span>Block</span>
  <McSeparator orientation="vertical" size={100} />
  <span>Block</span>
</div>

Custom Size

<McSeparator size={200} />

Content Split Layout

<div className="flex h-48 items-stretch">
  <div className="flex-1">Left content</div>
  <McSeparator orientation="vertical" className="h-full" />
  <div className="flex-1">Right content</div>
</div>

API Reference

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	Base UI default (`horizontal`)	Direction of the separator line
`size`	`number`	`undefined`	Separator length in pixels
`className`	`string`	`undefined`	Additional classes for custom sizing/states

All other props from @base-ui/react/separator are supported.

MC Separator

On this page