Separator

Visually or semantically separates content.

<div 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">shadcn/ui</div>
        <div class="text-muted-foreground">The Foundation for your Design System</div>
    </div>
    <twig:Separator />
    <div>A set of beautifully designed components that you can customize, extend, and build on.</div>
</div>

Installation

php bin/console ux:install separator --kit shadcn

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your app:

{# @prop orientation &#039;horizontal&#039;|&#039;vertical&#039; The separator orientation. #}
{# @prop decorative boolean Whether the separator is purely decorative (not semantic). #}
{%- props orientation = &#039;horizontal&#039;, decorative = true -%}
&lt;div
    class=&quot;{{ (&#039;shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes.defaults({
        &#039;data-slot&#039;: &#039;separator&#039;,
        &#039;data-orientation&#039;: orientation,
        role: decorative ? &#039;none&#039; : &#039;separator&#039;,
        &#039;aria-orientation&#039;: decorative ? false : orientation,
    }) }}
&gt;&lt;/div&gt;

Usage

<twig:Separator />

Examples

Vertical

Use orientation="vertical" for a vertical separator.

<div class="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <twig:Separator orientation="vertical" />
    <div>Docs</div>
    <twig:Separator orientation="vertical" />
    <div>Source</div>
</div>

Vertical separators between menu items with descriptions.

<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>
    <twig:Separator orientation="vertical" />
    <div class="flex flex-col gap-1">
        <span class="font-medium">Account</span>
        <span class="text-xs text-muted-foreground">Profile &amp; security</span>
    </div>
    <twig:Separator orientation="vertical" class="hidden md:block" />
    <div class="hidden flex-col gap-1 md:flex">
        <span class="font-medium">Help</span>
        <span class="text-xs text-muted-foreground">Support &amp; docs</span>
    </div>
</div>

List

Horizontal separators between list items.

<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>
    <twig:Separator />
    <dl class="flex items-center justify-between">
        <dt>Item 2</dt>
        <dd class="text-muted-foreground">Value 2</dd>
    </dl>
    <twig:Separator />
    <dl class="flex items-center justify-between">
        <dt>Item 3</dt>
        <dd class="text-muted-foreground">Value 3</dd>
    </dl>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

<div class="flex flex-col items-center gap-8">
    {# Arabic #}
    <div class="flex max-w-sm flex-col gap-4 text-sm" dir="rtl">
        <div class="flex flex-col gap-1.5">
            <div class="leading-none font-medium">shadcn/ui</div>
            <div class="text-muted-foreground">الأساس لنظام التصميم الخاص بك</div>
        </div>
        <twig:Separator />
        <div>مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.</div>
    </div>

    {# Hebrew #}
    <div class="flex max-w-sm flex-col gap-4 text-sm" dir="rtl">
        <div class="flex flex-col gap-1.5">
            <div class="leading-none font-medium">shadcn/ui</div>
            <div class="text-muted-foreground">הבסיס למערכת העיצוב שלך</div>
        </div>
        <twig:Separator />
        <div>קבוצה של רכיבים מעוצבים בצורה טובה שניתן להתאים אישית, להרחיב ולבנות עליהם.</div>
    </div>
</div>

API Reference

`<twig:Separator>`

Prop	Type	Default
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`
`decorative`	`boolean`	`true`