Separator

The Separator component provides you with divider lines and separators.

Live Examples

Live Example

☀️

Copy

View Code

import { Separator } from '@jarllyng/nostromo' export default function SeparatorExample() { return ( <div className="space-y-4"> <div>Content above separator</div> <Separator /> <div>Content below separator</div> </div> )...

Import


import { Separator } from "@jarllyng/nostromo";
// or
import { Separator } from "@jarllyng/nostromo/separator";

Usage


import { Separator } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
    </div>
  );
}

Vertical

Live Example

☀️

Copy

View Code

import { Separator } from '@jarllyng/nostromo' export default function VerticalSeparator() { return ( <div className="flex items-center space-x-4"> <div>Left</div> <Separator orientation="vertical" /> <div>Right</div> </div> )...

Props

Prop	Type	Default	Required	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	No	Separator orientation
`decorative`	`boolean`	`false`	No	Whether separator is decorative (hidden from screen readers)
`variant`	`"default" \| "subtle" \| "strong"`	`"default"`	No	Visual variant
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Props

The Separator component extends React.HTMLAttributes<HTMLDivElement>, so it accepts all standard HTML div attributes (e.g., id, data-*, aria-*).