Skip to content
Lenso UI

Separator

Visually divide content sections

Usage

import { Separator } from '@lenso/ui';
"use client";
import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";
const styles = stylex.create({  root: { maxWidth: 448 },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 500 },  description: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  intro: { display: "flex", flexDirection: "column", gap: 4 },  separator: { marginBlock: 16 },  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function Basic() {  return (    <div {...stylex.props(styles.root)}>      <div {...stylex.props(styles.intro)}>        <h4 {...stylex.props(styles.heading)}>HeroUI v3 Components</h4>        <p {...stylex.props(styles.description)}>Beautiful, fast and modern React UI library.</p>      </div>      <Separator xstyle={styles.separator} />      <div {...stylex.props(styles.links)}>        <span>Blog</span>        <Separator orientation="vertical" />        <span>Docs</span>        <Separator orientation="vertical" />        <span>Source</span>      </div>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Examples

Variants

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: {    display: "flex",    maxWidth: 448,    flexDirection: "column",    alignItems: "center",    gap: 12,  },});export function Variants() {  return (    <div {...stylex.props(styles.column)}>      <div>Default Variant</div>      <Separator variant="default" />      <div>Secondary Variant</div>      <Separator variant="secondary" />      <div>Tertiary Variant</div>      <Separator variant="tertiary" />    </div>  );}export default Variants;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Surface

The Separator component adapts to different surface backgrounds for better visibility.

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator, Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", flexDirection: "column", gap: 32 },  surface: {    display: "flex",    minWidth: 320,    flexDirection: "column",    gap: 12,    borderRadius: "var(--radius-3xl)",    padding: 24,  },  border: { border: "1px solid var(--border)" },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 600, color: "var(--foreground)" },  text: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },});export function WithSurface() {  return (    <div {...stylex.props(styles.column)}>      {(["default", "secondary", "tertiary", "transparent"] as const).map((variant) => (        <Surface          key={variant}          xstyle={[styles.surface, variant === "transparent" && styles.border]}          variant={variant}        >          <h3 {...stylex.props(styles.heading)}>            {variant[0]?.toUpperCase()}            {variant.slice(1)} Surface          </h3>          <Separator variant={variant === "transparent" ? "default" : variant} />          <p {...stylex.props(styles.text)}>Surface Content</p>        </Surface>      ))}    </div>  );}export default WithSurface;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Vertical

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function Vertical() {  return (    <div {...stylex.props(styles.links)}>      <div>Blog</div>      <Separator orientation="vertical" />      <div>Docs</div>      <Separator orientation="vertical" />      <div>Source</div>    </div>  );}export default Vertical;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Content

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const items = [  {    iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png",    subtitle: "Receive account activity updates",    title: "Set Up Notifications",  },  {    iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/compass-small.png",    subtitle: "Connect your browser to your account",    title: "Set up Browser Extension",  },  {    iconUrl:      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/mint-collective-small.png",    subtitle: "Create your first collectible",    title: "Mint Collectible",  },];const styles = stylex.create({  column: { display: "flex", maxWidth: 448, flexDirection: "column", gap: 16 },  row: { display: "flex", alignItems: "center", gap: 12 },  image: { width: 48, height: 48 },  text: { flex: 1 },  title: { fontSize: 14, lineHeight: "20px", fontWeight: 500 },  subtitle: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  separator: { marginBlock: 16 },});export function WithContent() {  return (    <div {...stylex.props(styles.column)}>      {items.map((item, index) => (        <div key={item.title}>          <div {...stylex.props(styles.row)}>            <img alt={item.title} {...stylex.props(styles.image)} src={item.iconUrl} />            <div {...stylex.props(styles.text)}>              <h4 {...stylex.props(styles.title)}>{item.title}</h4>              <p {...stylex.props(styles.subtitle)}>{item.subtitle}</p>            </div>          </div>          {index < items.length - 1 && <Separator xstyle={styles.separator} />}        </div>      ))}    </div>  );}export default WithContent;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); Base UI owns render composition.import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { maxWidth: 448 },  intro: { display: "flex", flexDirection: "column", gap: 4 },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 500 },  description: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  separator: { marginBlock: 16 },  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function RenderFunction() {  return (    <div {...stylex.props(styles.root)}>      <div {...stylex.props(styles.intro)}>        <h4 {...stylex.props(styles.heading)}>HeroUI v3 Components</h4>        <p {...stylex.props(styles.description)}>Beautiful, fast and modern React UI library.</p>      </div>      <Separator        xstyle={styles.separator}        render={(props) => <div {...props} data-custom="foo" />}      />      <div {...stylex.props(styles.links)}>        <div>Blog</div>        <Separator          orientation="vertical"          render={(props) => <div {...props} data-custom="foo" />}        />        <div>Docs</div>        <Separator          orientation="vertical"          render={(props) => <div {...props} data-custom="foo" />}        />        <div>Source</div>      </div>    </div>  );}export default RenderFunction;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", maxWidth: 320, flexDirection: "column", gap: 16 },  title: { fontSize: 14, lineHeight: "20px", fontWeight: 500, color: "var(--foreground)" },  secondary: { backgroundColor: "var(--separator-secondary)" },  links: {    display: "flex",    alignItems: "center",    gap: 12,    fontSize: 14,    lineHeight: "20px",    color: "var(--muted)",  },  divider: { height: 16, backgroundColor: "var(--separator)" },});export function CustomStyles() {  return (    <div {...stylex.props(styles.column)}>      <p {...stylex.props(styles.title)}>Account settings</p>      <Separator xstyle={styles.secondary} />      <div {...stylex.props(styles.links)}>        <span>Profile</span>        <Separator xstyle={styles.divider} orientation="vertical" />        <span>Billing</span>        <Separator xstyle={styles.divider} orientation="vertical" />        <span>Security</span>      </div>    </div>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Separator component classes, you can use the @layer components directive. Learn more.

@layer components {  .separator {    @apply bg-accent h-[2px];  }
  .separator--vertical {    @apply bg-accent w-[2px];  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Separator component uses these CSS classes (View source styles):

Base & Orientation Classes [!toc]

  • .separator - Base separator styles with default horizontal orientation
  • .separator--horizontal - Horizontal orientation (full width, 1px height)
  • .separator--vertical - Vertical orientation (full height, 1px width)

Variant Classes [!toc]

  • .separator--default - Default variant with standard contrast
  • .separator--secondary - Secondary variant with medium contrast
  • .separator--tertiary - Tertiary variant with subtle contrast

API Reference

Separator

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator
variant'default' | 'secondary' | 'tertiary''default'The visual variant of the separator
classNamestring-Additional CSS classes
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>-Overrides the default DOM element with a custom render function.
Card

Flexible container component for grouping related content and actions

Chip

Small informational badges for displaying labels, statuses, and categories

Avatar

Display user profile images with customizable fallback content