Downcity
Components

Separator

Use for lightweight visual separation between related content blocks

Separator

Separator creates light structural division inside a surface.

Import

import { Separator } from "@downcity/ui";

Horizontal

import { Separator } from "@downcity/ui";

export function SectionDivider() {
  return (
    <div className="flex flex-col gap-4">
      <div>Basic settings</div>
      <Separator />
      <div>Advanced settings</div>
    </div>
  );
}

Vertical

import { Separator } from "@downcity/ui";

export function InlineDivider() {
  return (
    <div className="flex h-5 items-center gap-3">
      <span>List</span>
      <Separator orientation="vertical" />
      <span>Grid</span>
    </div>
  );
}

Usage Notes

  • Use the default horizontal separator between blocks
  • Use orientation="vertical" for inline segmentation
  • Prefer Separator over hand-written border elements

Popover

Use for lightweight panels, helper content, and contextual controls

Sheet

Use for side panels, drawers, and longer contextual editing flows

Table of Contents

SeparatorImportHorizontalVerticalUsage Notes