Skip to main contentSkip to sidebarSkip to headerSkip to footer

Separator

A visual divider for separating content sections.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Separator } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
{/* Horizontal separator */}
<div className="w-sm h-24 items-center justify-center flex">
  <Separator />
</div>
 
{/* Vertical separator */}
<div className="flex h-24 items-center justify-center">
  <div>Left content</div>
  <Separator orientation="vertical" className="mx-4" />
  <div>Right content</div>
</div>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗