separator

Visual or semantic divider.

LaralCN-UI

Copy-and-own components

Blog

Docs

Source

<div class="w-full max-w-sm">
    <div class="text-sm font-medium">LaralCN-UI</div>
    <div class="text-sm text-muted-foreground">Copy-and-own components</div>
    <x-ui.separator class="my-4" />
    <div class="flex h-5 items-center gap-4 text-sm">
        <span>Blog</span>
        <x-ui.separator orientation="vertical" />
        <span>Docs</span>
        <x-ui.separator orientation="vertical" />
        <span>Source</span>
    </div>
</div>

Installation

php artisan ui:add separator

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

resources/views/components/ui/separator.blade.php

@props([
    'orientation' => 'horizontal',
])

@php
    $base = $orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full';

    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'shrink-0 bg-border',
        $base,
        $attributes->get('class'),
    );
@endphp

<div role="separator" aria-orientation="{{ $orientation }}"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}></div>

Usage

<x-ui.separator class="my-4" />

{{-- Vertical needs a height from the parent or from `class` --}}
<div class="flex h-6 items-center gap-4">
    <span class="text-sm">Docs</span>
    <x-ui.separator orientation="vertical" />
    <span class="text-sm">Blog</span>
</div>

orientation: horizontal (default) or vertical.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([
    'orientation' => 'horizontal',
])