SidebarSkeleton
Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Controlled Input
Field Arrays
Submit
Validation

Separator

Visually or semantically separates content.

horizontal
vertical

#Installation

bunx --bun barefoot add separator

#Usage

BarefootJS

An open-source UI component library.

Docs
Source
Blog
1import { Separator } from "@/components/ui/separator"23function SeparatorDemo() {4  return (5    <div>6      <div className="space-y-1">7        <h4 className="text-sm font-medium leading-none">BarefootJS</h4>8        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>9      </div>10      <Separator className="my-4" />11      <div className="flex h-5 items-center space-x-4 text-sm">12        <div>Docs</div>13        <Separator orientation="vertical" />14        <div>Source</div>15        <Separator orientation="vertical" />16        <div>Blog</div>17      </div>18    </div>19  )20}

#Examples

#Horizontal

BarefootJS

An open-source UI component library.

Docs
Source
Blog
1import { Separator } from "@/components/ui/separator"23function SeparatorHorizontal() {4  return (5    <div>6      <div className="space-y-1">7        <h4 className="text-sm font-medium leading-none">BarefootJS</h4>8        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>9      </div>10      <Separator className="my-4" />11      <div className="flex h-5 items-center space-x-4 text-sm">12        <div>Docs</div>13        <Separator orientation="vertical" />14        <div>Source</div>15        <Separator orientation="vertical" />16        <div>Blog</div>17      </div>18    </div>19  )20}

#Vertical

Docs
Source
Blog
1import { Separator } from "@/components/ui/separator"23function SeparatorVertical() {4  return (5    <div className="flex h-5 items-center space-x-4 text-sm">6      <div>Docs</div>7      <Separator orientation="vertical" />8      <div>Source</div>9      <Separator orientation="vertical" />10      <div>Blog</div>11    </div>12  )13}

#Menu

My Account
Profile
Settings
Billing
Log out
1import { Separator } from "@/components/ui/separator"23function SeparatorMenu() {4  return (5    <div className="w-48 rounded-md border border-border p-1">6      <div className="px-2 py-1.5 text-sm font-semibold">My Account</div>7      <Separator className="my-1" />8      <div className="px-2 py-1.5 text-sm">Profile</div>9      <div className="px-2 py-1.5 text-sm">Settings</div>10      <div className="px-2 py-1.5 text-sm">Billing</div>11      <Separator className="my-1" />12      <div className="px-2 py-1.5 text-sm">Log out</div>13    </div>14  )15}

#List

NotificationsOn
SoundDefault
LanguageEnglish
1import { Separator } from "@/components/ui/separator"23function SeparatorList() {4  return (5    <div className="w-full max-w-md">6      <div className="flex items-center justify-between py-3">7        <span className="text-sm font-medium">Notifications</span>8        <span className="text-sm text-muted-foreground">On</span>9      </div>10      <Separator />11      <div className="flex items-center justify-between py-3">12        <span className="text-sm font-medium">Sound</span>13        <span className="text-sm text-muted-foreground">Default</span>14      </div>15      <Separator />16      <div className="flex items-center justify-between py-3">17        <span className="text-sm font-medium">Language</span>18        <span className="text-sm text-muted-foreground">English</span>19      </div>20    </div>21  )22}

#API Reference

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator.
decorativebooleantrueWhen true, renders with role="none" (purely visual). When false, renders with role="separator" for accessibility.
classNamestring''Additional CSS classes to apply.