コンポーネントカタログ
46 個の Blade コンポーネント。 Tailwind + daisyUI のみで動く静的コンポーネントと、 Alpine.js で挙動を持つ動的コンポーネントを分けて整理。 カードを押すと各コンポーネントの個別ページに飛びます。
pinion-ui
· 静的 — Tailwind + daisyUI のみ 27Button
color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / ghost / link) — 全 8 colors
/buttonButton Group
segmented control 風に複数の button / link を束ねる wrapper。中央 child の border-radius は wrapper が自動で 0 にし、隣接 border は 1 本に統合される。hover は wrapper 側で soft tint に上書きされ、group コンテキストで重くならない (v0.3.3 で改善)。orientation は horizontal (default) / vertical。child に `class="join-item"` を付ける必要はない (v0.3.3 で不要に)。
/button-groupBadge
color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / dot)
/badgeCard
appearance = default / elevated / filled / base-100 / base-200 / base-300 / outline / soft / solid / bordered-top / ghost — divider toggle
/cardAvatar
initials / icon / image + size × shape × status indicator
/avatarAvatar Group
daisyUI 5 の avatar-group クラスで avatar を重ねた列 (facepile)。プロジェクトメンバー / 参加者 / 担当者リスト等に使う。slot に <x-avatar> を複数並べるだけ。spacing で重なり量を 3 段切替 (tight / normal / loose)。
/avatar-groupInput
color × appearance (outline / soft / underline / ghost) — プレフィックス/サフィックス, アイコン, フローティングラベル, アペンドスロット対応
/inputCheckbox
fake-checkbox (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size
/checkboxRadio
fake-radio (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size, with radio-group
/radioToggle
switch (peer + sr-only, role="switch") — color × appearance (solid / soft) × size, with optional ON/OFF state label. solid fills the rail; soft inverts and fills the thumb.
/togglePagination
full (numbered) / simple (prev-current/total-next) — color × appearance × size、Laravel paginator 対応
/paginationProgress
daisyUI progress bar wrapper. value=null で indeterminate (animated stripe)、value 指定で determinate。color × size × showLabel (percent / fraction) を props で制御。a11y は role=progressbar + aria-valuenow / valuemin / valuemax 付与済み。
/progressSkeleton
コンテンツ読み込み中の placeholder。daisyUI の skeleton class を wrap し、shape (rect / circle / text) / width / height / radius / animated を props で制御。width / height は Tailwind class 名 (`w-32`, `h-4` 等) で渡す。
/skeletonSpinner
ローディング表示用の inline indicator。daisyUI 5 の loading class を wrap。variant (spinner/dots/ring/bars/ball/infinity) × size (xs〜xl) × color (8 色) の組み合わせで、ボタン内・ページ全体・カードなどあらゆる「待ち時間」を表現する。
/spinnerKbd
キーボードショートカット用の inline chip。HTML5 要素を daisyUI 5 の kbd class で wrap。size と appearance の 2 props のみ。文章内に埋め込んだり、+ で繋いで combo を表現する。
/kbdTooltip
daisyUI 5 の tooltip class を wrap した no-JS / pure CSS のホバーチップ。trigger を slot に入れ、本文は text prop で渡す。position (top/right/bottom/left)・color (light default + 8 variants 含む neutral)・open (常時表示) の 3 props。
/tooltipIndicator
daisyUI 5 の indicator class を wrap した、別要素の角にバッジやドットを重ねるためのレイアウト。position (top/middle/bottom × start/center/end の 9 通り)・dot (bool, true = テキスト無しの純ドット)・color (8 色、default=error)・appearance (solid default / soft / outline / ghost / dash) の 4 props。default は solid (濃い fill) で「通知あり」を強く伝える。soft 等は opt-in。中身は $badge slot に入れ、被せたい要素は $slot に入れる。
/indicatorBreadcrumb
階層ナビゲーション。daisyUI 5 の breadcrumbs class を wrap。dual API: items 配列で渡すか、自前で <ul> に <li> を書くか。最後の item (url 省略) は現在地として link 化しない。separator は chevron (default) / slash の 2 種、size は sm / md / lg。
/breadcrumbStat
KPI / metric の単独表示。daisyUI の stats + stat class を wrap し、label / value / desc に加え valueColor / trend / trendValue で色付け＆方向矢印を制御。複数並べたい場合は wrapped=false で外側に <div class="stats"> を自前で作る。
/statDivider
daisyUI 5 の divider クラスをラップしたセクション区切り線。@verbatim@endverbatim でただの線、slot にテキストを入れるとラベル付き。direction=vertical で flex 内の縦線にもなる。
/dividerRating
daisyUI 5 の rating (mask + radio) ラッパー。star / heart / circle 形状、半分星 (half=true)、readonly に対応。各 demo の name 属性は radio group を分離するため必ず unique。
/ratingRange Slider
daisyUI 5 の range class を wrap した + ラベル/値表示/ヒント/エラーの chrome 付き。8 colors × 5 sizes、min/max/step、showValue (Alpine で live 表示)、error state。フォーム入力としても、純粋な視覚スライダーとしても使える。
/range-sliderInput Number
数量セレクタ — [−] [input] [＋] の 3 要素を border 連結。min/max/step は HTML 属性と Alpine clamp 両方で enforced、bound 到達時は ± ボタンが auto-disable する。native spinner arrows は非表示。decimal step (e.g. 0.5) も可。
/input-numberInput Group
form 要素を任意に組み合わせて横並びに joined する generic wrapper。select+input、input+button、input+input 等。x-input の prefix/suffix/append は単一 input 中心の組み合わせ用、こちらは複数の同格 form 要素用。`$c['addon']` helper class でテキスト装飾 span も addon 高さに揃えられる。
/input-groupPin Input
OTP / 認証コード入力 — N 個の単一文字ボックスが auto-advance / backspace-back / arrow nav / paste-to-fill で連携。autocomplete="one-time-code" を最初のボックスに付与済 (iOS/Android で SMS コード候補が出る)。numeric (default) / alphanumeric、length / size / masked / autofocus 等の prop。combined value は hidden input で form submit される。
/pin-inputTimeline
daisyUI 5 の timeline class を wrap した時系列リスト。items 配列で渡すだけ。orientation (vertical/horizontal)・compact (片側寄せ)・snap (アイコンを上端 snap)・appearance (solid default / soft) の 4 modifier。各 item に state=done|current|upcoming を付けると middle icon と connector の色が変化。default は solid (濃い primary) で done chain がはっきり立つ。穏やかに見せたいときだけ appearance="soft" を opt-in。
/timelineStepper
multi-step プロセスの可視化 — sign-up flow / checkout / wizard。items 配列で渡し、各 item に state=done|current|upcoming を付与。orientation (horizontal default / vertical) と variant (numbered default / dotted) の 2 modifier。timeline は append-only ヒストリ用、stepper は bounded sequential progress 用。
/stepperpinion-ui
· 動的 — Alpine.js 駆動 Alpine 13Alert
8 appearances × semantic colors, dismissible 対応
/alertTextarea
color × appearance (outline / soft / underline / ghost) — rows, autoresize, character counter, label/hint/error
/textareaSelect
native select — color × appearance, sizes, optgroup, multiple, floating label
/selectFile Upload
native + file:* utility (inline) and dashed dropzone (large area). Multi-file with progress bar driven by Alpine — simulate flag fakes upload progress so the demo is self-running.
/file-uploadNotification
ページに1度置き、任意の Alpine コンポーネントから $dispatch("notify", { type, content }) で Toast を出す。position / appearance / size / duration / event-name は props で制御。
/notification-systemTable
通常の table 表示 + x-table-scroll ラッパーで横スクロール時のみ左右ボタンと gradient fade を出す。コンテンツが overflow しない時はラッパーは透明 (何も足さない)。table 専用ではなく、card list / image strip 等にも使える。
/table-scrollDropdown
Alpine.js で開閉する汎用ドロップダウン。trigger を slot で差し替え可能、label prop で簡易ボタン化も可能。position (bottom-end default / bottom-start / top-end / top-start)・size (sm/md/lg)・width (任意の Tailwind w-* class) の 3 props。menu の中身は自由スロット — リンクでもボタンでも何でも入る。
/dropdownPopover
クリック (or hover) でトリガー横に浮かぶ panel。dropdown と tooltip の中間 — 任意コンテンツ (info card / mini form / 確認 prompt) を入れる。4 placement (top/right/bottom/left) を CSS で配置 (collision detection なし)、optional arrow、trigger="click" (default) / "hover"。Alpine 駆動、ESC で close、click 外で close。
/popoverModal
Alpine x-data 駆動のオーバーレイダイアログ。trigger slot に置いた要素をクリックで開く、または別所から $dispatch("open-modal-{id}") で開く。size (sm/md/lg/xl/full)・title・showClose・closeOnBackdrop の 5 props。背景 click / Escape / × ボタンで閉じる。x-trap で focus trap、x-teleport で body 直下に描画。
/modalTabs
タブ式コンテンツ切替。v0.4.0 で nested 構文に変更 (Blade slot を XSS なく自然に渡せる)。<x-tab name="..." label="...">content</x-tab> を <x-tabs> の中に並べる。variant: underline (default) / boxed / pill、size: sm / md / lg。default で初期 active な name を指定 (省略時は最初の tab)。Alpine の x-data でクライアント側の active 状態を保持。
/tabsAccordion
開閉式リスト。v0.4.0 で nested 構文に変更 (Blade slot を XSS なく自然に渡せる)。<x-accordion-item title="...">content</x-accordion-item> を <x-accordion> の中に並べる。single-open / multiple-open、size 3段階。content は Blade slot のため任意の Blade markup・コンポーネント・リンク等が使える。Alpine x-collapse で滑らかにアニメーション。
/accordionCollapse
daisyUI 5 の collapse class を wrap した single open/close ブロック (no-JS、内部の checkbox で開閉制御)。title prop か slot:title でヘッダ、$slot で本文を渡す。icon (null=default / arrow / plus)・bordered (default true)・open (初期 open) の 3 props + title。デフォルトはアイコンなしのミニマル表示で、必要に応じて icon prop でアイコンを opt-in する。複数まとめて FAQ にしたい時はそのまま縦に並べるだけ。
/collapseSidebar
x-teleport で body 直下に描画される drawer 系コンポーネント。trigger slot を click で開き、Escape / × / 背景 click で閉じる。side (left/right)・size (sm/md/lg)・backdrop の 3 軸で variant を作る。focus trap (x-trap.inert.noscroll) と role=dialog/aria-modal=true で a11y も担保。backdrop=false の時は overlay 全体を pointer-events-none にして、panel のみ pointer-events-auto に戻し、背後ページを操作可能にする (永続 inspector ・ツールパレット用途)。
/sidebar