ComponentSite and product

Separator

Horizontal or vertical divider.

$ npx context-ds add separator

On the site

In the product

Usage

Use it for

Dividing menu groups, card sections, toolbars.

Avoid

Thick or dark rules

Dependencies: @radix-ui/react-separator

Example

examples/separator.tsx

import { Separator } from "@/components/ui/separator";export function Product() {  return (    <div className="w-full max-w-sm text-body-sm">      <p className="text-fg">Monitors</p>      <p className="text-fg-muted">Watch pages for changes.</p>      <Separator className="my-3" />      <div className="flex h-5 items-center gap-3 text-fg-muted">        <span>Daily</span>        <Separator orientation="vertical" />        <span>Weekly</span>        <Separator orientation="vertical" />        <span>Monthly</span>      </div>    </div>  );}export function Site() {  return (    <div className="w-full max-w-md">      <p className="text-h5 text-fg">Scrape</p>      <p className="text-body text-fg-muted">Any page as clean Markdown.</p>      <Separator className="my-5" />      <p className="text-h5 text-fg">Search</p>      <p className="text-body text-fg-muted">The web, read for you.</p>    </div>  );}

Source

components/ui/separator.tsx

"use client";import * as React from "react";import * as SeparatorPrimitive from "@radix-ui/react-separator";import { cn } from "@/lib/utils";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: src/components/dashboard-ui/menu.tsx (MENU_SEPARATOR_CLASS); src/components/dashboard-ui/dialog.tsx (footer rule).