Zaidan

Command Palette

Search for a command to run...

GitHub43

Separator

Visually or semantically separates content.

Installation

CLI

Manual

Copy and paste the following code into your project.

import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import { Separator as SeparatorPrimitive, type SeparatorRootProps } from "@kobalte/core/separator";
import { type ComponentProps, mergeProps, splitProps, type ValidComponent } from "solid-js";
import { cn } from "~/lib/utils";


type SeparatorProps<T extends ValidComponent = "hr"> = PolymorphicProps<T, SeparatorRootProps<T>> &
  Pick<ComponentProps<T>, "class">;


const Separator = <T extends ValidComponent = "hr">(props: SeparatorProps<T>) => {
  const mergedProps = mergeProps({ orientation: "horizontal" } as const, props);
  const [local, others] = splitProps(mergedProps as SeparatorProps, ["class"]);
  return (
    <SeparatorPrimitive
      data-slot="separator"
      class={cn(
        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
        local.class,
      )}
      {...others}
    />
  );
};


export { Separator, type SeparatorProps };

Examples

Here are the source code of all the examples from the preview page:

Horizontal

import { Separator } from "~/components/ui/separator";
function SeparatorHorizontal() {
  return (
    <Example title="Horizontal">
      <div class="flex flex-col gap-4 style-lyra:text-xs/relaxed text-sm">
        <div class="flex flex-col gap-1">
          <div class="font-medium leading-none">shadcn/ui</div>
          <div class="text-muted-foreground">The Foundation for your Design System</div>
        </div>
        <Separator />
        <div>
          A set of beautifully designed components that you can customize, extend, and build on.
        </div>
      </div>
    </Example>
  );
}

Vertical

import { Separator } from "~/components/ui/separator";
function SeparatorVertical() {
  return (
    <Example title="Vertical">
      <div class="flex h-5 items-center gap-4 style-lyra:text-xs/relaxed text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </Example>
  );
}

Vertical Menu

import { Separator } from "~/components/ui/separator";
function SeparatorVerticalMenu() {
  return (
    <Example title="Vertical Menu">
      <div class="flex items-center gap-2 style-lyra:text-xs/relaxed text-sm md:gap-4">
        <div class="flex flex-col gap-1">
          <span class="font-medium">Settings</span>
          <span class="text-muted-foreground text-xs">Manage preferences</span>
        </div>
        <Separator orientation="vertical" />
        <div class="flex flex-col gap-1">
          <span class="font-medium">Account</span>
          <span class="text-muted-foreground text-xs">Profile & security</span>
        </div>
        <Separator orientation="vertical" />
        <div class="flex flex-col gap-1">
          <span class="font-medium">Help</span>
          <span class="text-muted-foreground text-xs">Support & docs</span>
        </div>
      </div>
    </Example>
  );
}

In List

import { Separator } from "~/components/ui/separator";
function SeparatorInList() {
  return (
    <Example title="In List">
      <div class="flex flex-col gap-2 style-lyra:text-xs/relaxed text-sm">
        <dl class="flex items-center justify-between">
          <dt>Item 1</dt>
          <dd class="text-muted-foreground">Value 1</dd>
        </dl>
        <Separator />
        <dl class="flex items-center justify-between">
          <dt>Item 2</dt>
          <dd class="text-muted-foreground">Value 2</dd>
        </dl>
        <Separator />
        <dl class="flex items-center justify-between">
          <dt>Item 3</dt>
          <dd class="text-muted-foreground">Value 3</dd>
        </dl>
      </div>
    </Example>
  );
}
PreviewDocs