Visually or semantically separates content.
1<script lang="ts">
2import { Separator } from "@/components/ui/separator"
3</script>
4
Installation
pnpm dlx sprawlify@latest add separatornpx sprawlify@latest add separatoryarn sprawlify@latest add separatorbunx --bun sprawlify@latest add separator
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1export { default as Separator } from "./separator.svelte";21<script lang="ts">
2import { Separator as SeparatorPrimitive } from "@sprawlify/svelte/separator"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte";
5
6interface Props extends ComponentProps<typeof SeparatorPrimitive.Root> {}
7
8let { class: className, orientation = "horizontal", decorative = true, ...rest }: Props = $props()
9</script>
10
11<SeparatorPrimitive.Root
12 data-slot="separator"
13 {decorative}
14 {orientation}
15 class={cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className)}
16 {...rest}
17/>Update the import paths to match your project setup.
Usage
1import { Separator } from "@/components/ui/separator"1<Separator />Examples
List
Horizontal separators between list items.
1<script lang="ts">
2import { Separator } from "@/components/ui/separator"
3</script>
4
Menu
Vertical separators between menu items with descriptions.
1<script lang="ts">
2import { Separator } from "@/components/ui/separator"
3</script>
4
Vertical
Use orientation="vertical" for vertical separators.
1<script lang="ts">
2import { Separator } from "@/components/ui/separator"
3</script>
4