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/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { Separator as SeparatorPrimitive } from "@sprawlify/react/separator";5import { cn } from "@/lib/utils";67function Separator({8 className,9 orientation = "horizontal",10 decorative = true,11 ...props12}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {13 return (14 <SeparatorPrimitive.Root15 data-slot="separator"16 decorative={decorative}17 orientation={orientation}18 className={cn(19 "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",20 className,21 )}22 {...props}23 />24 );25}2627export { Separator };28Update 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 (