Separator

Visually or semantically separates content.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/separator.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Horizontal

Radix Primitives

An open-source UI component library.

Content below the separator.

Vertical

Blog

Docs

Source

GitHub

In a List

Item One

Description for item one.

Item Two

Description for item two.

Item Three

Description for item three.

Usage

How to use this component in your code.

{/* Horizontal */}
<Separator />

{/* Vertical */}
<div className="flex h-5 items-center space-x-4">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
</div>