Separator

Storybook

Go to Story

DashedSeparator()

function DashedSeparator(__namedParameters): Element;

Defined in: src/components/Separator/DashedSeparator/DashedSeparator.tsx:78

Visual dashed separator component for dividing content sections. Use this when you need a more subtle visual break compared to a solid separator. Configure the dash color, size, and gap.

Built on top of radix-ui Separator.

Parameters

Parameter	Type
__namedParameters	DashedSeparatorProps

Returns

Element

Examples

// Custom dash styling
<DashedSeparator
  decorative
  dashColor="red"
  dashSize="8px"
  dashGap="4px"
/>

// Custom dash styling using class names
<DashedSeparator className={`
  [--dash-color:theme(colors.red.500)]
  [--dash-size:theme(spacing.4)]
  [--dash-gap:theme(spacing.2)]
`} />

// Basic horizontal separator
<div className="space-y-4">
  <p>Content above</p>
  <DashedSeparator decorative />
  <p>Content below</p>
</div>

// Vertical separator
<div className="flex items-center gap-4">
  <p>Left content</p>
  <DashedSeparator decorative orientation="vertical" />
  <p>Right content</p>
</div>

// With text
<div className="space-y-4">
  <p>Content above</p>
  <DashedSeparator>
    <SeparatorText>Or</SeparatorText>
  </DashedSeparator>
  <p>Content below</p>
</div>

---

Separator()

function Separator(__namedParameters): Element;

Defined in: src/components/Separator/Separator.tsx:50

Visual separator component for dividing content sections.

Built on top of radix-ui Separator.

Parameters

Parameter	Type
__namedParameters	SeparatorProps & RefAttributes<HTMLDivElement>

Returns

Element

Examples

// Basic horizontal separator
<div className="space-y-4">
  <p>Content above</p>
  <Separator decorative />
  <p>Content below</p>
</div>

// Vertical separator
<div className="flex items-center gap-4">
  <p>Left content</p>
  <Separator decorative orientation="vertical" />
  <p>Right content</p>
</div>

// With text
<div className="space-y-4">
  <p>Content above</p>
  <Separator>
    <SeparatorText>Or</SeparatorText>
  </Separator>
  <p>Content below</p>
</div>

---

SeparatorText()

function SeparatorText(__namedParameters): Element;

Defined in: src/components/Separator/SeparatorText.tsx:15

Text to be displayed over a Separator

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns

Element