Separator

A horizontal or vertical line used to visually divide content. Commonly used in toolbars, forms, and lists.

import { Separator } from "~/components/separator";

export default function SeparatorBasicDemo() {
  return <Separator />;
}

Installation

CLI

Run the following command to add the component to your project:

npx @ark-preset/cli@latest add separator

Manual

Create the recipe file at src/components/recipes/separator.ts:

import { tv, type VariantProps } from "tailwind-variants";

export const separatorVariants = tv({
  base: "shrink-0 bg-border",
  variants: {
    orientation: {
      horizontal: "h-px w-full",
      vertical: "h-full w-px",
    },
  },
  defaultVariants: {
    orientation: "horizontal",
  },
});

export type SeparatorVariants = VariantProps<typeof separatorVariants>;

Create the component file at src/components/separator/index.tsx:

import { splitProps, type Component } from "solid-js";
import { separatorVariants, type SeparatorVariants } from "../recipes/separator";
import { ark, type HTMLArkProps } from "@ark-ui/solid/factory";

type SeparatorProps = HTMLArkProps<"div"> & SeparatorVariants;

const Separator: Component<SeparatorProps> = (props) => {
  const [local, others] = splitProps(props, ["class", "orientation"]);

  return (
    <ark.div
      class={separatorVariants({ orientation: local.orientation, class: local.class })}
      role="separator"
      aria-orientation={local.orientation ?? "horizontal"}
      {...others}
    />
  );
};

export { Separator, separatorVariants };

Note: Make sure your project has the Tailwind CSS theme variables set up (--background, --foreground, --ring, --border, etc.) or override the utility classes to match your design system.

Usage

Basic Usage

import { Separator } from "~/components/separator";

export default function SeparatorBasicDemo() {
  return <Separator />;
}

Vertical

Set the orientation prop to “vertical” for a vertical separator.

Left

Right

import { Separator } from "~/components/separator";

export default function SeparatorVerticalDemo() {
  return (
    <div class="flex h-10 items-center gap-4">
      <span>Left</span>
      <Separator orientation="vertical" />
      <span>Right</span>
    </div>
  );
}

API Reference

Prop	Type	Default
orientation	`"horizontal" \| "vertical"`	`{"horizontal"}`
class	`string`	—