104Get started
HextaUI

Separator: Inline

Use render to output a <span> where a <div> isn't allowed, like inside a paragraph.

Ada Park4 min read

import { Separator } from "@/components/ui/separator"

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}

Add this example

This adds the example as components/examples/separator/render.tsx, together with the Separator component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/separator-render.json

To add only the component, follow the Separator installation.

Props in this example

The Separator props this example sets, from the API reference.

Separator

PropTypeDefault
orientation
"horizontal" | "vertical""horizontal"
decorativeHide the line from screen readers when it is only visual.
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>

Every prop is in the Separator API reference.

More Separator examples

See them all, with keyboard support and accessibility notes, on the Separator page.

Related components