Separator

Code

import { Separator } from "@fadymondy/nasaq/web";export function Sections() {  return (    <div className="flex flex-col gap-4">      <p>Profile</p>      <Separator />      <p>Security</p>    </div>  );}

Layout · stable

Live examples and controls: Separator in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/separator.json

A thin line that divides content. Horizontal by default (full width, 1px tall); vertical is 1px wide and 1rem (h-4) tall, centred on the cross axis so it sits between inline items such as header buttons.

There is no separator story of its own; it is demonstrated in apps/lab/stories/app-shell.stories.tsx (vertical, between the sidebar trigger and the breadcrumbs).

When to useCopy Anchor Link

• Dividing groups of related content or toolbar items.
• Visual rhythm between sections when spacing alone is not enough.

When not to useCopy Anchor Link

• Separating levels of surface: use the surface tokens (COLOR); borders separate siblings, not levels.
• A divider inside a menu: use DropdownMenuSeparator (DropdownMenu).
• A breadcrumb chevron: use BreadcrumbSeparator (Breadcrumb).

ImportCopy Anchor Link

import { Separator } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Separator } from "@fadymondy/nasaq/web";

export function Sections() {
  return (
    <div className="flex flex-col gap-4">
      <p>Profile</p>
      <Separator />
      <p>Security</p>
    </div>
  );
}

AnatomyCopy Anchor Link

Separator     data-slot="separator"   role="separator", aria-orientation from Base UI

APICopy Anchor Link

SeparatorCopy Anchor Link

Base UI Separator props (ComponentProps<typeof BaseSeparator>).

Horizontal: h-px w-full. Vertical: h-4 w-px self-center. Override the length with className (e.g. h-6), or pass className="h-auto self-stretch" to fill the cross axis of a flex row. The default stays h-4 so existing headers keep their look.

ExamplesCopy Anchor Link

Vertical between toolbar itemsCopy Anchor Link

import { Button, Separator } from "@fadymondy/nasaq/web";

export function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <Button size="sm" variant="ghost">Bold</Button>
      <Button size="sm" variant="ghost">Italic</Button>
      <Separator orientation="vertical" />
      <Button size="sm" variant="ghost">Link</Button>
    </div>
  );
}

With labels in ArabicCopy Anchor Link

import { Separator } from "@fadymondy/nasaq/web";

export function SectionsAr() {
  return (
    <div dir="rtl" className="flex flex-col gap-4">
      <p>الملف الشخصي</p>
      <Separator />
      <p>الأمان</p>
    </div>
  );
}

AccessibilityCopy Anchor Link

• Renders role="separator" with aria-orientation. Screen readers announce it as a divider.
• It is not focusable and has no keyboard behaviour.
• Base UI's Separator does not expose a decorative prop; if a line is purely decorative, consider a border utility on the container instead so it is not announced.

RTL & i18nCopy Anchor Link

• A line is symmetric, so it does not mirror. Vertical separators sit between items in DOM order and follow dir.
• Use me-* / ms-* for spacing (as the app-shell story does with className="me-1"), never mr-* / ml-*.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Colour: bg-border. Change it with a token class such as bg-nq-line; never raw hex.
• Target [data-slot=separator], [data-orientation=vertical].

Do / Don'tCopy Anchor Link

• Do use borders to separate siblings on the same surface level.
• Do prefer spacing over a line when the grouping is already clear.
• Don't use separators as decoration or to fill empty space.
• Don't stack a separator directly against a card border.

RelatedCopy Anchor Link

• AppShell · DropdownMenu · Card

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-layout-separator--docs