docs/components/navigation/Separator

Separator

Horizontal or vertical divider.

import { Separator } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#More Examples

Vertical

<Separator orientation="vertical" />

#Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Orientation of the separator line.
unstyledbooleanfalseRemove default styles if true.
classstringAdditional CSS classes
styleJSX.CSSPropertiesInline styles

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-border
  • --sk-separator-color
  • --sk-separator-margin
  • --sk-separator-size
  • --sk-space-md