Separator

Stable

A hairline between groups, horizontal or vertical.

$ npx shadcn add @klarhimmel/separator

When to use

Use for
A visual break between groups inside one section.
Not for
Separating sections. Use headings and space.
Pairs with
Menus, toolbars, lists.

Preview

Exempelhotellet

A small hotel by the water.

Reception is open 07:00 to 22:00, every day.

separator.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { Separator } from '@/components/klarhimmel/ui/separator';

export default function Example() {
  return (
    <Theme theme="brand">
      <Separator className="my-4" />
    </Theme>
  );
}

Install

Import

$import { Separator } from '@/components/klarhimmel/ui/separator';

Lands in: components/klarhimmel/ui/separator.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in: Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

Vertical

Rooms

Spa

Contact

import { Separator } from '@/components/klarhimmel/ui/separator';

export default function SeparatorVertical() {
  return (
    <div className="flex h-6 items-center gap-4 text-kh-small text-kh-ink-2">
      <span>Rooms</span>
      <Separator orientation="vertical" />
      <span>Spa</span>
      <Separator orientation="vertical" />
      <span>Contact</span>
    </div>
  );
}

import { Separator } from '@/components/klarhimmel/ui/separator';

export default function SeparatorMenu() {
  return (
    <div className="w-64 rounded-kh-lg border border-kh-line bg-kh-surface p-2 text-kh-small">
      <p className="px-3 py-2">Rename</p>
      <p className="px-3 py-2">Duplicate</p>
      <Separator decorative={false} className="my-1" />
      <p className="px-3 py-2 text-kh-danger">Delete room</p>
    </div>
  );
}

API reference

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	A vertical one needs a parent with a height, such as a flex row.
`decorative`	`boolean`	`true`	Hidden from assistive tech. Set false when the rule marks a real change of topic.
`className`	`string`	`-`	Extra classes, merged after the component's own.

When to use

Use for

Not for