@zedtech/zedkit-ui

Separator

Accessible horizontal/vertical divider lines.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-separator

Above

Below

Left

Right

View props table

Who is it for?: Developers dividing stacked or inline content.
When should I use it?: Between sections, menu groups, or inline items.
When should I pick something else?: For spacing alone — use Stack gap instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/separator instead.

Horizontal rule

import { Separator } from "@zedtech/zedkit-ui";
<Separator />

Vertical divider

Orders

Customers

Reports

import { Separator, Stack, Text } from "@zedtech/zedkit-ui";
<Stack direction="horizontal" gap="md" className="items-center">
  <Text>Orders</Text>
  <Separator orientation="vertical" />
  <Text>Customers</Text>
</Stack>

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { Separator } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Separator />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Decorative by default (role="none"); pass decorative={false} with an accessible name when it separates named regions. Line weight follows --zk-border-width (mist 1px).

Troubleshooting

Vertical divider invisible — put it in a row with text (or anything that sets the row height). It stretches to that row. Announced as separator — set `decorative` explicitly; unnamed non-decorative separators confuse screen readers.

Cycle a word in a clipped slot

Stable-height clipped slot with padded block axis so descenders and underline stay visible; outgoing glides up (`zk-word-roll-exit-up`), incoming uses the stan…

Format a compact duration

Turn a millisecond span or two instants into compact `6m 17s` / `1h 02m` text. Digits follow the locale argument; unit letters stay Latin. Install with npm.