Separator

A visual divider that creates space between content elements, available in horizontal and vertical orientations.

<div>
    <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
        <p class="text-sm text-muted-foreground">
            Symfony UX initiative: a JavaScript ecosystem for Symfony
        </p>
    </div>
    <twig:Separator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
        <a href="https://ux.symfony.com" class="hover:underline">Website</a>
        <twig:Separator orientation="vertical" />
        <a href="https://ux.symfony.com/packages" class="hover:underline">Packages</a>
        <twig:Separator orientation="vertical" />
        <a href="https://github.com/symfony/ux" class="hover:underline">Source</a>
    </div>
</div>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

$ composer require --dev symfony/ux-toolkit

Then, run the following command to install the component and its dependencies:

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

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

Copy the following file(s) into your Symfony app:

templates/components/Separator.html.twig

{# @prop orientation 'horizontal'|'vertical' The orientation of the separator, default to `horizontal` #}
{# @prop decorative boolean Whether the separator is decorative or not, default to `true` #}
{%- props orientation = 'horizontal', decorative = true -%}
{%- set style = html_cva(
    base: 'shrink-0 bg-border',
    variants: {
        orientation: {
            horizontal: 'h-[1px] w-full',
            vertical: 'h-full w-[1px]',
        },
    },
) -%}
<div
    class="{{ style.apply({orientation: orientation, decorative: decorative}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes.defaults({
        role: decorative ? 'none' : 'separator',
        'aria-orientation': decorative ? false : orientation,
    }) }}
></div>

If necessary, install the following Composer dependencies:

$ composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

And the most important, enjoy!

Usage

<div>
    <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
        <p class="text-sm text-muted-foreground">
            Symfony UX initiative: a JavaScript ecosystem for Symfony
        </p>
    </div>
    <twig:Separator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
        <a href="https://ux.symfony.com" class="hover:underline">Website</a>
        <twig:Separator orientation="vertical" />
        <a href="https://ux.symfony.com/packages" class="hover:underline">Packages</a>
        <twig:Separator orientation="vertical" />
        <a href="https://github.com/symfony/ux" class="hover:underline">Source</a>
    </div>
</div>

Examples

Default

<div>
    <div class="space-y-1">
        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
        <p class="text-sm text-muted-foreground">
            Symfony UX initiative: a JavaScript ecosystem for Symfony
        </p>
    </div>
    <twig:Separator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
        <a href="https://ux.symfony.com" class="hover:underline">Website</a>
        <twig:Separator orientation="vertical" />
        <a href="https://ux.symfony.com/packages" class="hover:underline">Packages</a>
        <twig:Separator orientation="vertical" />
        <a href="https://github.com/symfony/ux" class="hover:underline">Source</a>
    </div>
</div>

Vertical

<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>

API Reference

Separator

Prop	Type	Description
`orientation`	`'horizontal'\|'vertical'`	The orientation of the separator, default to `horizontal`
`decorative`	`boolean`	Whether the separator is decorative or not, default to `true`