Westy Design Systemv0.2.7
OverviewComponentsExamplesStorybook

Foundations

  • Typography
  • Colors
  • Spacing
  • Radius
  • Shadows
  • Icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip

Chat

  • Attachment
  • Bubble
  • Marker
  • Message
  • Message Scroller

Components

Separator

Visually or semantically separates content.

Playground

Westy Design System
The foundation for Westy products.
A set of components built on the shared tokens, ready to compose.
—orientation
—decorative
Usage
Import Separator from the design system and drop it between the blocks it should divide. It defaults to orientation="horizontal" and fills the available width.
Westy Design System
The foundation for Westy products.
A set of components built on the shared tokens, ready to compose.
import { Separator } from "@workspace/ui/components/separator"

<div className="flex max-w-sm flex-col gap-4 text-sm">
  <div className="flex flex-col gap-1.5">
    <div className="leading-none font-medium">Westy Design System</div>
    <div className="text-muted-foreground">
      The foundation for Westy products.
    </div>
  </div>
  <Separator />
  <div>
    A set of components built on the shared tokens, ready to compose.
  </div>
</div>
Vertical
Set orientation="vertical" to divide items laid out in a row. The separator stretches to the height of the flex container, so give the row an explicit height or let the tallest item define it.
Blog
Docs
Source
<div className="flex h-5 items-center gap-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>
List
Horizontal separators between key-value rows keep structured data scannable without wrapping each row in a bordered box.
PlanPro
Seats12
RenewsJan 1, 2027
<div className="flex w-full max-w-sm flex-col gap-3 text-sm">
  <div className="flex items-center justify-between">
    <span>Plan</span>
    <span className="text-muted-foreground">Pro</span>
  </div>
  <Separator />
  <div className="flex items-center justify-between">
    <span>Seats</span>
    <span className="text-muted-foreground">12</span>
  </div>
  <Separator />
  <div className="flex items-center justify-between">
    <span>Renews</span>
    <span className="text-muted-foreground">Jan 1, 2027</span>
  </div>
</div>
Decorative vs. semantic
By default the separator is decorative: it renders with role="none" and is ignored by assistive technology. Pass decorative={false} when the division carries meaning — the element is then exposed as role="separator" with the current orientation. Both render identically.
Decorative (default)
Semantic
{/* Ignored by screen readers */}
<Separator />

{/* Announced as a separator */}
<Separator decorative={false} />
RTL
Separators carry no directional styles — a vertical separator divides a right-to-left row without any extra classes.
المدونة
الوثائق
المصدر
<div dir="rtl" className="flex h-5 items-center gap-4 text-sm">
  <div>المدونة</div>
  <Separator orientation="vertical" />
  <div>الوثائق</div>
  <Separator orientation="vertical" />
  <div>المصدر</div>
</div>
API Reference
Separator wraps the Radix Separator primitive and accepts all of its props.
PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
decorativebooleantrue
asChildbooleanfalse

Tokens used

1 design tokens consumed by the Separator component.

  • --border

    Border

    bg-border