A quiet divider between content: plain rule, fading edges, soft dots, a labelled break or an icon knot.
FreeWeb and Mobile5 variantsMotion
Preview
npx shadcn add @fetaui/separatorPlayground
Horizontal, line
Horizontal, fade
Horizontal, dotted
Horizontal, label
Or
Horizontal, icon
Vertical
Or
Arrives with content
Today
Menu
Settings
Manage preferences
Account
Profile and security
Help
Support and docs
List
ORDER
#4821
Subtotal$128.00
Shipping$12.00
Tax$18.20
Total$158.20
Or
SIGN IN
Or
By continuing you agree to the terms.
Timeline
CHAT
Yesterday
Did the checkout fix ship?
Tonight with 4.12
Today
Pay works again on iOS
Nice, closing the issue
Sections
SETTINGS
Display nameNora Pell
Time zoneToronto
Email digestDaily
MentionsInstant
Orientation
Kind
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/separator
Accessibility
- Hidden from assistive tech by default, as it is purely visual.
- Set
semanticwhen the division means something, like groups in a menu. - Labels like OR are read as text.
Motion
- Separators stay still. With
appear, the rule draws from the centre in 240 ms. - The label fades up 4 px and the knot pops in, 200 ms each.
- With reduced motion, they appear.
Responsive behavior
- 1 px at every size. Vertical separators match the height of what they split.
Performance
- Static by default: no animation runs without appear.
- appear scales the rule once on mount, so it stays on the compositor.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Separator. Props: orientation, kind (line, fade, dotted, label, icon), label, icon, semantic, appear, animated.
- It is hidden from assistive tech by default. Set semantic only when the division means something, like groups in a menu.
- A vertical separator needs a parent with a height.
Related
ItemComponentA row that shows one thing: media, a title, a description and an optional action.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.ToolbarComponentA floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.