Separator

A rule between things.

Decorative by default — a line that exists for the eye should not announce itself — and role="separator" when it genuinely divides two regions of content.

Layout

<script lang="ts">
	import { Separator } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
orientation	'horizontal' | 'vertical'	'horizontal'	A vertical rule needs a parent with a height, or self-stretch.
semantic	boolean	false	Announce it as a separator. Leave false for purely visual rules.
class	string	—	Merged with the component's own classes, last — so yours win.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<span>Nightly scan</span>
<Separator />
<span class="text-muted-foreground">Runs at 02:00 on volume1.</span>

Layout · Card · StatCard · Accordion · AccordionItem · Collapsible · Table · Scroller

---

← All components · Getting started · Theming · source