Separator
A visual divider for separating content sections.
<script lang="ts">
import { Separator } from "coss-svelte";
</script>
<div class="max-w-72">
<div class="flex flex-col gap-1">
<h4 class="font-medium text-sm">coss ui</h4>
<p class="text-muted-foreground text-sm">
Unstyled, accessible primitives for fast product UI and design systems.
</p>
</div>
<Separator class="my-4" />
<div class="flex h-4 items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Releases</div>
</div>
</div>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Separator } from "coss-svelte";Anatomy
Separator exposes a single component export for the current implementation.
API Reference
Separator
A visual divider for separating content sections.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | Orientation | "horizontal" | Layout direction for the component. |
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Separator.Root.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Content & Display
- Particles
- 1