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";

<div className="flex max-w-sm flex-col gap-4 text-sm">
  <div className="flex flex-col gap-1">
    <h4 className="font-medium leading-none">shadcn.io</h4>
    <p className="text-muted-foreground">
      A set of primitive components for building UI.
    </p>
  </div>
  <Separator />
  <div>
    A collection of accessible, beautiful, and customizable components.
  </div>
</div>

Demos

List

Vertical

API Reference

Separator

div

PropType

AttributeType

Select

Sheet