Tailwind CSS Separator
Use the separator component to draw a thin divider line between content, like sections of a page or items in a toolbar. For dividing rows inside a list or a menu, use the item separator or the dropdown separator.
<div class="flex w-full max-w-sm flex-col gap-4 text-sm">
<div class="flex flex-col gap-1.5">
<div class="leading-none font-medium">Starting Point UI</div>
<div class="text-muted-foreground">
The foundation for your design system
</div>
</div>
<div class="separator"></div>
<div>
A set of beautifully designed components that you can customize, extend, and
build on.
</div>
</div>Usage
Add the separator class to an empty element. It renders horizontally unless you add separator-vertical. A vertical separator stretches to its container's height, so give the row a height or let the tallest sibling define it.
<div class="separator"></div>Examples
Vertical separator
Divide inline items with separator-vertical.
Separator in a menu
Vertical separators divide richer inline groups too. Hide trailing ones responsively along with their content.
<div class="flex items-center gap-2 text-sm md:gap-4">
<div class="flex flex-col gap-1">
<span class="font-medium">Settings</span>
<span class="text-xs text-muted-foreground">Manage preferences</span>
</div>
<div class="separator separator-vertical"></div>
<div class="flex flex-col gap-1">
<span class="font-medium">Account</span>
<span class="text-xs text-muted-foreground">Profile & security</span>
</div>
<div class="separator separator-vertical hidden md:block"></div>
<div class="hidden flex-col gap-1 md:flex">
<span class="font-medium">Help</span>
<span class="text-xs text-muted-foreground">Support & docs</span>
</div>
</div>Separator in a list
Separate rows of a definition list.
<div class="flex w-full max-w-sm flex-col gap-2 text-sm">
<dl class="flex items-center justify-between">
<dt>Item 1</dt>
<dd class="text-muted-foreground">Value 1</dd>
</dl>
<div class="separator"></div>
<dl class="flex items-center justify-between">
<dt>Item 2</dt>
<dd class="text-muted-foreground">Value 2</dd>
</dl>
<div class="separator"></div>
<dl class="flex items-center justify-between">
<dt>Item 3</dt>
<dd class="text-muted-foreground">Value 3</dd>
</dl>
</div>RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="separator-rtl-demo" dir="rtl" class="flex max-w-sm flex-col gap-4 text-sm">
<div class="flex flex-col gap-1.5">
<div class="leading-none font-medium">Starting Point UI</div>
<div class="text-muted-foreground" data-i18n="subtitle">الأساس لنظام التصميم الخاص بك</div>
</div>
<div class="separator"></div>
<div data-i18n="description">مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.</div>
</div>
<script>
const translations = {
ar: { dir: "rtl", subtitle: "الأساس لنظام التصميم الخاص بك", description: "مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها." },
he: { dir: "rtl", subtitle: "הבסיס למערכת העיצוב שלך", description: "סט של רכיבים מעוצבים בצורה יפה שאתה יכול להתאים אישית, להרחיב ולבנות עליהם." },
en: { dir: "ltr", subtitle: "The foundation for your design system", description: "A set of beautifully designed components that you can customize, extend, and build on." },
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("separator-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
});
</script>