コンポーネント一覧
pinion-ui

Theme

Tune

Lang

Divider

daisyUI 5 の divider クラスをラップしたセクション区切り線。@verbatim<x-divider>@endverbatim でただの線、slot にテキストを入れるとラベル付き。direction=vertical で flex 内の縦線にもなる。

ただの仕切り線

Section above

Section below

<p>Section above</p>
<x-divider />
<p>Section below</p>

<p>
    Section above
</p>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<p>
    Section below
</p>

ラベル付き

Login form

OR

Social login

<p>Login form</p>
<x-divider>OR</x-divider>
<p>Social login</p>

<p>
    Login form
</p>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">OR</span>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<p>
    Social login
</p>

ラベル位置 (center / start / end)

center (default)
start
end 
<x-divider>center (default)</x-divider>
<x-divider position="start">start</x-divider>
<x-divider position="end">end</x-divider>

<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">center (default)</span>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-none w-4 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">start</span>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">end</span>
<div class="flex-none w-4 border-t border-base-content/10"></div>
</div>

color — null (default) / primary / secondary / accent / info / success / warning / error / neutral

default (no color)
primary
secondary
accent
info
success
warning
error
neutral 
<x-divider>default (no color)</x-divider>
<x-divider color="primary">primary</x-divider>
<x-divider color="secondary">secondary</x-divider>
<x-divider color="accent">accent</x-divider>
<x-divider color="info">info</x-divider>
<x-divider color="success">success</x-divider>
<x-divider color="warning">warning</x-divider>
<x-divider color="error">error</x-divider>
<x-divider color="neutral">neutral</x-divider>

<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">default (no color)</span>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-primary/30"></div><span class="px-3 text-xs font-medium shrink-0 text-primary">primary</span>
<div class="flex-1 border-t border-primary/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-secondary/30"></div><span class="px-3 text-xs font-medium shrink-0 text-secondary">secondary</span>
<div class="flex-1 border-t border-secondary/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-accent/30"></div><span class="px-3 text-xs font-medium shrink-0 text-accent">accent</span>
<div class="flex-1 border-t border-accent/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-info/30"></div><span class="px-3 text-xs font-medium shrink-0 text-info">info</span>
<div class="flex-1 border-t border-info/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-success/30"></div><span class="px-3 text-xs font-medium shrink-0 text-success">success</span>
<div class="flex-1 border-t border-success/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-warning/30"></div><span class="px-3 text-xs font-medium shrink-0 text-warning">warning</span>
<div class="flex-1 border-t border-warning/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-error/30"></div><span class="px-3 text-xs font-medium shrink-0 text-error">error</span>
<div class="flex-1 border-t border-error/30"></div>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-neutral/30"></div><span class="px-3 text-xs font-medium shrink-0 text-neutral">neutral</span>
<div class="flex-1 border-t border-neutral/30"></div>
</div>

縦線 (flex 内に置く)

Left
OR
Right
A
B
VS
C
<div class="flex w-full">
    <div class="flex-1 grid place-items-center py-6">Left</div>
    <x-divider direction="vertical">OR</x-divider>
    <div class="flex-1 grid place-items-center py-6">Right</div>
</div>
<div class="flex w-full">
    <div class="flex-1 grid place-items-center py-6">A</div>
    <x-divider direction="vertical" color="primary" />
    <div class="flex-1 grid place-items-center py-6">B</div>
    <x-divider direction="vertical" color="success">VS</x-divider>
    <div class="flex-1 grid place-items-center py-6">C</div>
</div>

<div class="flex w-full">
<div class="flex-1 grid place-items-center py-6">
        Left
    </div>
<div class="flex flex-col items-center self-stretch">
<div class="flex-1 border-l border-base-content/10"></div><span class="py-3 text-xs font-medium shrink-0 text-base-content/60">OR</span>
<div class="flex-1 border-l border-base-content/10"></div>
</div>
<div class="flex-1 grid place-items-center py-6">
        Right
    </div>
</div>
<div class="flex w-full">
<div class="flex-1 grid place-items-center py-6">
        A
    </div>
<div class="flex flex-col items-center self-stretch">
<div class="flex-1 border-l border-primary/30"></div>
<div class="flex-1 border-l border-primary/30"></div>
</div>
<div class="flex-1 grid place-items-center py-6">
        B
    </div>
<div class="flex flex-col items-center self-stretch">
<div class="flex-1 border-l border-success/30"></div><span class="py-3 text-xs font-medium shrink-0 text-success">VS</span>
<div class="flex-1 border-l border-success/30"></div>
</div>
<div class="flex-1 grid place-items-center py-6">
        C
    </div>
</div>

real-world examples — ログイン分割 / card section

Log in

OR

Profile

Account settings overview.

Basic info

Name: Yamada Taro

Email: taro@example.com

Notifications

Email notifications: on

Push notifications: off

<div class="border border-base-300 rounded-[var(--radius-box)] bg-base-100 p-lg">
    <h3 class="font-medium mb-3">Log in</h3>
    <div class="space-y-2">
        <x-input type="email" placeholder="email" />
        <x-input type="password" placeholder="password" />
        <x-button class="w-full">Log in</x-button>
    </div>
    <x-divider>OR</x-divider>
    <div class="space-y-2">
        <x-button appearance="outline" color="neutral" class="w-full">Continue with Google</x-button>
        <x-button appearance="outline" color="neutral" class="w-full">Continue with GitHub</x-button>
    </div>
</div>
<div class="border border-base-300 rounded-[var(--radius-box)] bg-base-100 p-lg">
    <h3 class="font-medium mb-2">Profile</h3>
    <p class="text-sm text-base-content/70">Account settings overview.</p>
    <x-divider position="start" color="primary">Basic info</x-divider>
    <p class="text-sm">Name: Yamada Taro</p>
    <p class="text-sm">Email: taro@example.com</p>
    <x-divider position="start" color="primary">Notifications</x-divider>
    <p class="text-sm">Email notifications: on</p>
    <p class="text-sm">Push notifications: off</p>
</div>

<div class="border border-base-300 rounded-[var(--radius-box)] bg-base-100 p-lg">
<h3 class="font-medium mb-3">
        Log in
    </h3>
<div class="space-y-2">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="email" id="input_6a7e9b5075ea5" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="email">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="password" id="input_6a7e9b5075f15" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="password">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer w-full">Log in</button>
</div>
<div class="flex items-center w-full">
<div class="flex-1 border-t border-base-content/10"></div><span class="px-3 text-xs font-medium shrink-0 text-base-content/60">OR</span>
<div class="flex-1 border-t border-base-content/10"></div>
</div>
<div class="space-y-2">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer w-full">Continue with Google</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer w-full">Continue with GitHub</button>
</div>
</div>
<div class="border border-base-300 rounded-[var(--radius-box)] bg-base-100 p-lg">
<h3 class="font-medium mb-2">
        Profile
    </h3>
<p class="text-sm text-base-content/70">
        Account settings overview.
    </p>
<div class="flex items-center w-full">
<div class="flex-none w-4 border-t border-primary/30"></div><span class="px-3 text-xs font-medium shrink-0 text-primary">Basic info</span>
<div class="flex-1 border-t border-primary/30"></div>
</div>
<p class="text-sm">
        Name: Yamada Taro
    </p>
<p class="text-sm">
        Email: taro@example.com
    </p>
<div class="flex items-center w-full">
<div class="flex-none w-4 border-t border-primary/30"></div><span class="px-3 text-xs font-medium shrink-0 text-primary">Notifications</span>
<div class="flex-1 border-t border-primary/30"></div>
</div>
<p class="text-sm">
        Email notifications: on
    </p>
<p class="text-sm">
        Push notifications: off
    </p>
</div>