A line between groups of content, horizontal or vertical, decorative by default.

WebStableLayout

Web only — React, from @krizaka/ui/separator. Stable: its API only changes in a major version.

When to use

Between groups of a list or a menu.
Between items of a toolbar or a row of links (orientation="vertical").

When not to use

To separate every item of a list: use spacing.
To separate items of a menu.Use instead: Dropdown menu

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

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

Examples

Horizontal

Between two groups.

Account

Notifications

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

export default function SeparatorHorizontal() {
  return (
    <div className="flex w-72 flex-col gap-3 text-sm text-fg">
      <p>Account</p>
      <Separator />
      <p className="text-fg-secondary">Notifications</p>
    </div>
  );
}

Vertical

Between items of a row, as real separators.

Videos

Live

Shop

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

// `decorative={false}`: a real separator, read by assistive technology.
export default function SeparatorVertical() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm text-fg-secondary">
      <span>Videos</span>
      <Separator orientation="vertical" decorative={false} />
      <span>Live</span>
      <Separator orientation="vertical" decorative={false} />
      <span>Shop</span>
    </div>
  );
}

Props

This module has no component props: see the import and the preview above.

Accessibility

Radix Separator: decorative by default (role="none"); decorative={false} gives role="separator" and its orientation.

Best practices

Prefer space to lines; a separator marks a change of group.
decorative={false} only when the separation means something to a screen-reader user.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Separator