Separator

A horizontal or vertical divider.

1 file

<div class="w-full max-w-sm">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">PyBlade UI</h4>
    <p class="text-sm text-muted-foreground">Components to copy into your project.</p>
  </div>
  <pb-ui.separator class="my-4" />
  <div class="flex h-5 items-center gap-4 text-sm">
    <div>Docs</div>
    <pb-ui.separator orientation="vertical" />
    <div>Components</div>
    <pb-ui.separator orientation="vertical" />
    <div>Themes</div>
  </div>
</div>

Installation

pyblade-ui add separator

Copy this file into your project

components/ui/separator.html

@props({'orientation': 'horizontal'})
<div role="separator" aria-orientation="{{ orientation }}" data-slot="separator" {{ attributes.cn(
    "shrink-0 bg-border",
    {'horizontal': 'h-px w-full', 'vertical': 'h-full w-px self-stretch'}[orientation],
) }}></div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.separator> is available in all your templates.

<pb-ui.separator orientation="vertical" />

Props

Prop	Default
orientation	'horizontal'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Spinner Skeleton ›