Separator
A shadcn-style separator component built with Ark UI primitives.
Top section
Bottom section
Blog
Docs
Source
import { Separator } from "@/components/ui/separator";
const SeparatorDemo = () => (
<div className="flex flex-col gap-4">
<div className="w-full max-w-md space-y-3">
<p className="font-medium text-sm">Top section</p>
<Separator />
<p className="text-muted-foreground text-sm">Bottom section</p>
</div>
<div className="flex h-5 items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
</div>
</div>
);
export default SeparatorDemo;
Installation
npx shadcn@latest add @ark-cn/separatorInstall the dependency required by this primitive:
npm install @ark-ui/reactCopy the component source into your app:
TSXcomponents/ui/separator.tsx
"use client";
import { ark } from "@ark-ui/react/factory";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export const Separator = ({
className,
orientation = "horizontal",
...props
}: ComponentProps<typeof ark.div> & {
orientation?: "horizontal" | "vertical";
}) => {
return (
<ark.div
className={cn(
"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
className,
)}
data-slot="separator"
data-orientation={orientation}
{...props}
/>
);
};
Update import aliases to match your project setup.
Usage
import * as Separator from "@/components/ui/separator"Read exported parts in src/components/ui/separator.tsx and compose the primitive according to the Ark UI pattern for this component.
Examples
Top section
Bottom section
Blog
Docs
Source
import { Separator } from "@/components/ui/separator";
const SeparatorDemo = () => (
<div className="flex flex-col gap-4">
<div className="w-full max-w-md space-y-3">
<p className="font-medium text-sm">Top section</p>
<Separator />
<p className="text-muted-foreground text-sm">Bottom section</p>
</div>
<div className="flex h-5 items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
</div>
</div>
);
export default SeparatorDemo;
API reference
This component mirrors the upstream Ark UI primitive.
See the ARK UI documentation for the full API.