Skip to content
pycolors /docs
UIUpdated May 11, 2026

Separator

Lightweight visual divider for grouping content, separating sections, and clarifying layout hierarchy in PyColors UI.

UISeparator

Visual separation without visual noiseLink to section

The Separator component creates a thin divider between related pieces of interface.

Use it for:

  • separating page sections
  • grouping card content
  • dividing toolbar actions
  • separating metadata rows
  • creating vertical dividers in compact layouts
  • improving scanability without adding heavy containers

Separator is intentionally minimal. It uses PyColors semantic tokens such as bg-border, so it adapts to light mode, dark mode, and product theme overrides.

Core idea

Separator should clarify structure, not decorate the page.

ImportLink to section

separator-import.tsx
import { Separator } from "@pycolors/ui";

Basic usageLink to section

Use a horizontal Separator to divide related content blocks.

Account

Manage profile settings and preferences.

Billing

Review invoices, plan status, and payment settings.

basic-separator.tsx
import { Separator } from "@pycolors/ui";

export function BasicSeparator() {
  return (
    <div className="rounded-2xl border border-border/60 bg-card p-5">
      <div>
        <div className="text-sm font-medium text-foreground">
          Account
        </div>
        <div className="mt-1 text-sm text-muted-foreground">
          Manage profile settings and preferences.
        </div>
      </div>

      <Separator className="my-4" />

      <div>
        <div className="text-sm font-medium text-foreground">
          Billing
        </div>
        <div className="mt-1 text-sm text-muted-foreground">
          Review invoices, plan status, and payment settings.
        </div>
      </div>
    </div>
  );
}

Default behavior

Separator is decorative by default. It renders without separator semantics unless you explicitly set decorative={false}.

When to use SeparatorLink to section

Use Separator when spacing alone is not enough to communicate grouping.

Sections

Separate related content groups inside cards, panels, and forms.

Toolbars

Divide compact action groups without introducing heavy borders.

Hierarchy

Make dense information easier to scan while keeping the layout calm.

OrientationLink to section

Separator supports horizontal and vertical orientation.

HorizontalLink to section

Horizontal is the default orientation.

Starter Pro

Production-ready SaaS starter with authentication, billing, and protected app foundations.

AuthStripePrisma
horizontal-separator.tsx
import { Badge, Separator } from "@pycolors/ui";

export function HorizontalSeparator() {
  return (
    <div className="rounded-2xl border border-border/60 bg-card p-5">
      <div className="text-sm font-medium text-foreground">
        Starter Pro
      </div>
      <div className="mt-1 text-sm leading-6 text-muted-foreground">
        Production-ready SaaS starter with authentication, billing, and protected app foundations.
      </div>

      <Separator className="my-4" />

      <div className="flex flex-wrap gap-2">
        <Badge variant="outline">Auth</Badge>
        <Badge variant="outline">Stripe</Badge>
        <Badge variant="outline">Prisma</Badge>
      </div>
    </div>
  );
}

VerticalLink to section

Use a vertical Separator inside a flex row. Give the parent a height or use self-stretch.

Free

Pro

Enterprise

vertical-separator.tsx
import { Separator } from "@pycolors/ui";

export function VerticalSeparator() {
  return (
    <div className="flex h-12 items-center rounded-2xl border border-border/60 bg-card px-4">
      <div className="text-sm font-medium text-foreground">
        Free
      </div>

      <Separator orientation="vertical" className="mx-4" />

      <div className="text-sm font-medium text-foreground">
        Pro
      </div>

      <Separator orientation="vertical" className="mx-4" />

      <div className="text-sm font-medium text-foreground">
        Enterprise
      </div>
    </div>
  );
}

Vertical rule

Vertical separators need layout height. Use them inside rows, toolbars, navs, or compact metadata groups.

Decorative vs semanticLink to section

By default, Separator is decorative and uses role="none".

Set decorative={false} when the separator communicates a meaningful boundary for assistive technologies.

Personal details

Name, email, and account profile.

Workspace details

Team, role, and organization settings.

semantic-separator.tsx
import { Separator } from "@pycolors/ui";

export function SemanticSeparator() {
  return (
    <div className="rounded-2xl border border-border/60 bg-card p-5">
      <section>
        <h3 className="text-sm font-medium text-foreground">
          Personal details
        </h3>
        <p className="mt-1 text-sm leading-6 text-muted-foreground">
          Name, email, and account profile.
        </p>
      </section>

      <Separator decorative={false} className="my-4" />

      <section>
        <h3 className="text-sm font-medium text-foreground">
          Workspace details
        </h3>
        <p className="mt-1 text-sm leading-6 text-muted-foreground">
          Team, role, and organization settings.
        </p>
      </section>
    </div>
  );
}

Semantic rule

Most separators should stay decorative. Use semantic separators only when the boundary itself helps describe the structure.

Settings cardLink to section

Notifications

Choose how PyColors should contact you.

Product updates

Receive release notes and roadmap updates.

Enabled

Security alerts

Important account and billing notifications.

Required
settings-card-separators.tsx
import { Badge, Separator } from "@pycolors/ui";

export function SettingsCardSeparators() {
  return (
    <div className="rounded-2xl border border-border/60 bg-card">
      <div className="p-5">
        <div className="text-sm font-medium text-foreground">
          Notifications
        </div>
        <div className="mt-1 text-sm text-muted-foreground">
          Choose how PyColors should contact you.
        </div>
      </div>

      <Separator />

      <div className="grid gap-4 p-5">
        <div className="flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium text-foreground">
              Product updates
            </div>
            <div className="text-sm text-muted-foreground">
              Receive release notes and roadmap updates.
            </div>
          </div>
          <Badge variant="outline">Enabled</Badge>
        </div>

        <Separator />

        <div className="flex items-center justify-between gap-4">
          <div>
            <div className="text-sm font-medium text-foreground">
              Security alerts
            </div>
            <div className="text-sm text-muted-foreground">
              Important account and billing notifications.
            </div>
          </div>
          <Badge>Required</Badge>
        </div>
      </div>
    </div>
  );
}

Compact metadataLink to section

v1.10.0
Released Apr 24, 2026
metadata-separator.tsx
import { Separator } from "@pycolors/ui";

export function MetadataSeparator() {
  return (
    <div className="flex h-10 items-center rounded-2xl border border-border/60 bg-card px-4 text-sm text-muted-foreground">
      <span>v1.10.0</span>
      <Separator orientation="vertical" className="mx-3" />
      <span>Released Apr 24, 2026</span>
      <Separator orientation="vertical" className="mx-3 hidden sm:block" />
      <span className="hidden sm:inline">Marketing</span>
    </div>
  );
}

Usage patternsLink to section

Start with spacing

Use spacing first. Add Separator only when visual grouping is still unclear.

Keep dividers subtle

Use semantic border tokens. Avoid strong colors unless the divider is part of a very specific branded surface.

Pick the right orientation

Use horizontal dividers for stacked content and vertical dividers for compact rows.

Avoid over-fragmenting the page

Too many separators make the UI feel heavy and harder to scan.

Separator vs Border vs CardLink to section

SituationUse
Split content inside the same surfaceSeparator
Define the edge of a surfaceBorder
Group content into a distinct objectCard
Divide toolbar action groupsSeparator
Separate unrelated page regionsSection spacing or Card
Emphasize a critical stateAlert or semantic color

Decision rule

Use Separator inside a surface. Use Card when the content deserves its own surface.

APILink to section

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Divider direction
decorativebooleantrueRemoves separator semantics when true
classNamestring—Additional Tailwind classes
...propsReact.HTMLAttributes<HTMLDivElement>—Standard div attributes

TypeScript typesLink to section

separator-types.ts
export interface SeparatorProps
  extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
}

AccessibilityLink to section

  • Decorative separators use role="none".
  • Semantic separators use role="separator".
  • Semantic separators include aria-orientation.
  • Most visual dividers should be decorative.
  • Do not use Separator as a replacement for headings.
  • Do not rely on a divider alone to explain hierarchy.

Accessibility rule

If the separator does not add meaning for screen reader users, keep it decorative.

Prefer / avoidLink to section

Prefer

  • subtle dividers inside cards and panels
  • horizontal separators for stacked sections
  • vertical separators for compact rows
  • decorative separators by default
  • spacing before adding extra lines

Avoid

  • using separators as decoration
  • too many dividers in dense layouts
  • strong colors for neutral separation
  • semantic separators without structural value
  • replacing headings with divider lines

Common questionsLink to section

RelatedLink to section

CardUse Card when content needs its own surface and boundary.ColorsSemantic tokens for borders, surfaces, and layout dividers.BadgePair badges with separators in metadata and compact status rows.Layout patternBuild clearer page structure with spacing, surfaces, and dividers.

On this page

When to use SeparatorDecorative vs semanticSeparator vs Border vs CardAPIPrefer / avoidCommon questionsRelated