HomeComponents
Components
  • AccordionDone
  • AlertDone
  • Alert DialogDone
  • Aspect RatioNo Change
  • AvatarDone
  • BadgeDone
  • BreadcrumbDone
  • ButtonDone
  • Button GroupDone
  • CalendarNo Change
  • CardDone
  • CarouselDone
  • ChartNo Change
  • CheckboxDone
  • CollapsibleNo Change
  • ComboboxDone
  • CommandDone
  • Context MenuDone
  • Data TableDone
  • Date PickerDone
  • DialogDone
  • DrawerDone
  • Dropdown MenuDone
  • EmptyNo Change
  • FieldNo Change
  • React Hook FormNo Change
  • Hover CardDone
  • InputDone
  • Input GroupDone
  • Input OTPDone
  • ItemDone
  • KbdDone
  • LabelDone
  • MenubarDone
  • Navigation MenuDone
  • PaginationDone
  • PopoverDone
  • ProgressDone
  • Radio GroupDone
  • ResizableNo Change
  • Scroll AreaNo Change
  • SelectDone
  • SeparatorDone
  • SheetDone
  • SidebarNo Change
  • SkeletonDone
  • SliderDone
  • SonnerDone
  • SpinnerDone
  • SwitchDone
  • TableNo Change
  • TabsDone
  • TextareaDone
  • ToastDone
  • ToggleDone
  • Toggle GroupDone
  • TooltipDone
  • TypographyDone

Separator

Lightweight divider that separates groups of content horizontally or vertically.

Horizontal

Section Label

Use the separator to create visual breathing room between related blocks of content.

Vertical

Item
Item

Installation

pnpm dlx shadcn@latest add @omni/separator

Usage

import { Separator } from "@/components/ui/separator"
<Separator className="my-6" />