Separator

Separates content with a horizontal or vertical rule.

Content above the separator.

Content below the separator.

Component Code

<div class="w-full max-w-md space-y-4 text-sm">
    <p>Content above the separator.</p>
    <april:separator />
    <p>Content below the separator.</p>
</div>

The separator is horizontal by default. Set orientation="vertical" when it sits between items in a row.

<april:separator />
<april:separator orientation="vertical" class="h-6" />

Use the component's classes and semantic color tokens to match the surrounding surface.

Publishing Views

Use the following command to publish this view:

php artisan april:publish separator

April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run:

php artisan april:publish --all

Review local overrides after an upgrade with `php artisan april:update --diff`.