Divider

A thin line separating two pieces of content.

Row one

Row two

1<template>2  <Divider />3</template>

Props

Name	Type	Default
variant	"primary" \| "secondary"	"primary"
...props	USeparator props (orientation, as, decorative, ...)	-

Guidelines

Do

Use variant="secondary" (the default) for a divider between repeated rows in a list.
Use variant="primary" for a divider inside a container whose own border is already stroke-primary (e.g. a Card), so the line reads consistently with it.
Pass orientation="vertical" to separate inline items in a toolbar or button group.

Don't

Don't reach for a plain <div class="h-px bg-stroke-primary"> - that's exactly what this component replaces.
Don't use it to fake a section break inside a Card - a Card's own header/footer slots already provide that separation.

Examples

Vertical

`orientation` passes through to USeparator unchanged - pair it with an explicit height, since a vertical divider has no content of its own to size against.

1<template>2  <div class="flex items-center gap-3">3    <Button variant="ghost" size="xs">Copy</Button>4    <Divider orientation="vertical" class="h-4" />5    <Button variant="ghost" size="xs">Share</Button>6  </div>7</template>

Primary variant

Matches a container already bordered in stroke-primary, e.g. sitting inside a Card.

Section one

Section two

1<template>2  <Card>3    <div class="flex flex-col gap-4">4      <span>Section one</span>5      <Divider variant="primary" />6      <span>Section two</span>7    </div>8  </Card>9</template>