Skip to main content
Browse docs

Marwes documentation

Divider

Family-local baseline separator family with a single Divider component for horizontal and vertical content separation.

What this family solves

Family-local baseline separator family with a single Divider component for horizontal and vertical content separation.

Use when

  • The UI needs a semantic separator between related sections or inline groups of content.
  • The product wants one small separator primitive with a clear size scale and horizontal or vertical orientation.
  • The team wants React, Vue, and Svelte divider behavior to stay aligned through one shared contract and one core recipe.

Avoid when

  • The layout only needs whitespace and does not benefit from an actual semantic separator.
  • The design really calls for a richer pattern such as an "or" divider, labeled separator, or section heading rather than a plain rule.
  • The product expects Figma-backed vertical-divider variants even though the current synced design page only teaches the horizontal baseline.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

Divider

Type

DividerProps

Vue — @marwes-ui/vue

Component

Divider

Type

DividerProps

Svelte — @marwes-ui/svelte

Component

Divider

Type

DividerProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Divider } from "@marwes-ui/react"

export function Example() {
  return <Divider />
}

Vue

<script setup lang="ts">
import { Divider } from "@marwes-ui/vue"
</script>

<template>
  <Divider />
</template>

Svelte

<script lang="ts">
  import { Divider } from "@marwes-ui/svelte"
</script>

<Divider />

Accessibility requirements

  • Meaningful separation: Use a semantic divider only when it represents a meaningful separation between content groups.
  • Screen-reader review: Verify vertical dividers have a real layout height and do not replace clearer headings or spacing.
  • Manual review boundary: Product-level judgment about when a divider adds meaningful section separation versus when spacing or headings would be the more honest structure.
  • Manual review 2: Real layout review for vertical dividers because container height and surrounding alignment still matter visually.
  • Manual review 3: Any future move toward text-embedded or richer divider patterns that would expand beyond the current single-component scope.

Theming

Divider uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources