Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Text Right Separator for Ark UI

A horizontal line that fills the row and stops at a More link, for a section that continues elsewhere.

A horizontal line fills the row up to a More link at the end. The link is the only text, and the line points toward it.

End the row with the action when the section continues elsewhere, such as View all. A Button under the block is clearer when the action should not share the line. In React, Ark UI leaves the gap to the parent.

Preview

Preview width
More

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Separator anatomy: horizontal, vertical

Usage

<div className="flex w-full max-w-sm items-center gap-2">
  <Separator className="flex-1" />
  <a
    className="shrink-0 text-muted-foreground text-xs hover:text-foreground hover:underline"
    href="#more"
  >
    More
  </a>
</div>

FAQ

How does More end up at the end?

The Separator with flex-1 comes first, then an a with shrink-0. The row is flex items-center gap-2, so the line fills the start and the link sits at the end.

Why does the line use flex-1?

Separator includes shrink-0. flex-1 is merged after that class, and cn() keeps flex-1, which sets shrink too. The link's shrink-0 keeps More at its own width.

How is the link styled at rest?

The anchor uses text-xs and text-muted-foreground. shrink-0 keeps the word from shrinking when the row gets narrow.

Can I focus More from the keyboard?

Yes. It is an anchor with an href, so Tab stops on it and Enter follows it. The separator does not take focus.

Are the lines announced with Ark UI?

The words beside the line are what people need to hear. The line has role separator, so it can be announced. A border is quieter when the line is only visual.

API Reference

Separator

No extra props in this demo. The rest is on the Separator page.

All 20 separator examples