Separator

The Separator component provides a visual divider to separate content in a layout. It supports both horizontal and vertical orientations and can include an optional label.

Preview

Usage

import { Separator } from 'components/lib';

function Example(){
  return (
    <div>
    
      <Separator label='Section 1' orientation='horizontal' />
      <div>Content for section 1</div>
      <Separator label='Section 2' orientation='horizontal' />
      <div>Content for section 2</div>
      
    </div>
  );
}

Props

Prop	Description	Required	Value
className	custom style	optional	SCSS or Tailwind
label	optional label to display	optional	string
orientation	orientation of the separator	optional	string (horizontal/vertical), default: horizontal
decorative	whether the separator is purely decorative	optional	boolean, default: true

Notes

• The Separator component uses the @radix-ui/react-separator library for its core functionality.

• The orientation prop can be set to "horizontal" or "vertical" to control the direction of the separator.

• The decorative prop is set to true by default, meaning the separator is purely visual and doesn't convey any semantic meaning. If decorative is set to false, it will convey a meaning to assistive technologies.

• You can apply custom styles through the className prop. The component uses predefined styles from the separator.tailwind.js file.

• If a label prop is provided, it will be displayed within the separator, useful for denoting sections.

• For more information refer to the Separator Shadcn documentation.