Visually or semantically separates content.
1import { Separator } from "@/components/ui/separator";23export default function Preview() {4 return (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/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { Separator as SeparatorPrimitive } from "@sprawlify/solid/separator";2import { cn } from "@/lib/utils";3import { type ComponentProps, splitProps } from "solid-js";45function Separator(props: ComponentProps<typeof SeparatorPrimitive.Root>) {6 const [local, others] = splitProps(props, ["class", "orientation", "decorative"]);7 const orientation = () => local.orientation ?? "horizontal";8 const decorative = () => local.decorative ?? true;910 return (11 <SeparatorPrimitive.Root12 data-slot="separator"13 decorative={decorative()}14 orientation={orientation()}15 class={cn(16 "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",17 local.class,18 )}19 {...others}20 />21 );22}2324export { Separator };25Update the import paths to match your project setup.
Usage
1import { Separator } from "@/components/ui/separator"1<Separator />Examples
List
Horizontal separators between list items.
1import { Separator } from "@/components/ui/separator";23export default function Preview() {4 return (Menu
Vertical separators between menu items with descriptions.
1import { Separator } from "@/components/ui/separator";23export default function Preview() {4 return (Vertical
Use orientation="vertical" for vertical separators.
1import { Separator } from "@/components/ui/separator";23export default function Preview() {4 return (