shadcn.io is not affiliated with official shadcn/ui

Shadcn Separator for React and Tailwind

Visually separate content with a line.

shadcn.io

A set of primitive components for building UI.

A collection of accessible, beautiful, and customizable components.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/separator.json

pnpm dlx shadcn@latest add https://kit.dev/r/separator.json

npx shadcn@latest add https://kit.dev/r/separator.json

yarn shadcn@latest add https://kit.dev/r/separator.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/separator.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import { cn } from "@/lib/utils";

interface SeparatorProps extends React.ComponentProps<typeof ark.div> {
  /**
   * The orientation of the separator.
   *
   * @default "horizontal"
   */
  orientation?: "horizontal" | "vertical";
}

export const Separator = (props: SeparatorProps) => {
  const { orientation = "horizontal", className, ...rest } = props;

  return (
    <ark.div
      aria-orientation={orientation}
      className={cn(
        "shrink-0",
        "bg-input",
        "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-orientation={orientation}
      data-slot="separator"
      role="separator"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

import { Separator } from "@/components/ui/separator";

<Separator />

Examples

Vertical

Use orientation prop to control the orientation of the separator.

List

API Reference

Separator

Horizontal or vertical divider between content.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`className`	`string`	`-`

For complete list of props, see Ark UI documentation.

Select

Sheet