Components / Separator

Separator

<Separator />Stable

1-pixel divider in --border color. Use between groups of content. Defaults to horizontal; pass orientation='vertical' for inline use.

import { Separator } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Top of the depth chart
Backup roster

Code

import { Separator } from "@/components/upnext";


<Separator />

Orientations

Top of the depth chart
Backup roster
<div className="flex flex-col gap-3">
  <span>Top of the depth chart</span>
  <Separator />
  <span>Backup roster</span>
</div>

Composition

Marcus Reed

QB · Class of 2027

Tariq Bell

WR · Class of 2026

<div>
  <div>…profile A…</div>
  <Separator />
  <div>…profile B…</div>
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.