Inkbox

Component

Separator

A 1px rule in the faint lilac, across or down.

Text reference
npx -y github:anwarlemu/inkbox-brand-cli#release add separator
Preview

Webhooks

Manage subscriptions and review payloads.

Mailboxes
Contact rules
Custom domains

Usage

Use between groups: under a page head, above the rail's footer, between list rows, between toolbar groups (orientation="vertical"). It is decorative unless you set decorative={false}.

Avoid

  • Darker rules than the faint lilac between rows
  • Double rules
  • Rules inside a lilac panel

Exports: Separator. This component is a client component.

Dependencies: radix-ui.

Example

examples/separator.tsx
import { Separator } from "@/components/ui/separator";​export function Preview() {  return (    <div className="w-full max-w-96">      <p className="text-body text-fg">Webhooks</p>      <p className="text-body text-fg-muted">Manage subscriptions and review payloads.</p>      <Separator className="my-4" />      <div className="flex h-5 items-center gap-4 text-body whitespace-nowrap text-fg">        <span>Mailboxes</span>        <Separator orientation="vertical" />        <span>Contact rules</span>        <Separator orientation="vertical" />        <span>Custom domains</span>      </div>    </div>  );}

Source

components/ui/separator.tsx
"use client";​import * as React from "react";import { Separator as SeparatorPrimitive } from "radix-ui";​import { cn } from "@/lib/utils";​// The console's rules: a 1px line in the faint lilac (#F3F1F5) under a page head, at the rail's edge, between list// items and above the rail's footer. Decorative by default.function Separator({ className, orientation = "horizontal", decorative = true, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {  return (    <SeparatorPrimitive.Root      data-slot="separator"      decorative={decorative}      orientation={orientation}      className={cn("shrink-0 bg-line-subtle data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className)}      {...props}    />  );}​export { Separator };

Reference: Figma 427:2715: the rail's footer rule, page head rules, inbox list dividers.