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

Theme

Tune

Lang

theme × tune, no rewrite

つくる速度に、上限はない。

ひとつのマークアップが、data-tune × data-theme で300通り以上に化ける。色も形も余白も書体も、属性ひとつで丸ごと変わる。迷ったら試せばいい — 書き直しの時間は、ゼロ。

GitHub で見る コンポーネント一覧
data-tune — shape · space · type data-theme — color only
specimen.blade.php · read-only
<html data-theme="" data-tune="">
<!-- one markup, never touched · 880 pixel-perfect results below -->
<h1>Balance is the default.</h1>
<p class="lead">Set once, travels together.</p>
<x-button color="primary" icon="rocket">Ship it</x-button>
<x-badge color="success">Active</x-badge>
<x-input label="Email" />
<x-progress :value="68" />
<x-rating :value="4" />
たった1つのコードから
880通りのプロ品質
data-theme pinion
data-tune default

 tune ×  theme =  通り — 表示中  / 

新機能・新テーマを、 先に受け取る

確認メールを送りました。 メール内のリンクをクリックすると登録完了です。

送信できませんでした。 こちらのページから登録できます。

月1〜2通。 いつでも配信を停止できます。

人気 新規

Starter

¥2,980/月

個人・小規模チーム向け。基本コンポーネント一式に対応。

推奨 新機能

Team

¥9,800/月

複数プロジェクト・複数人での利用に対応。プリセット保存つき。

法人 SLA

Enterprise

要問合せ

SLA・専任サポート・カスタムトークン設計込みのフルプラン。

人気 新規

Starter

¥2,980/月

個人・小規模チーム向け。基本コンポーネント一式に対応。

推奨 新機能

Team

¥9,800/月

複数プロジェクト・複数人での利用に対応。プリセット保存つき。

法人 SLA

Enterprise

要問合せ

SLA・専任サポート・カスタムトークン設計込みのフルプラン。

Tune

同じUI、違う「間（ま）」

tuneを切り替えるだけで空間設計が変わる。

Q. 同じコンポーネントのはずなのに、なぜこんなに印象が違って見えるのだろう？

A. 角の丸みや影の表情も、実は静かに変わっている。

AI エージェントのための設計

60 秒で導入

Laravel 11 / 12 
# 1. パッケージを追加
composer require sparrowhawk-labs/pinion-ui

# 2. アセットと AGENTS.md scaffolding を install
php artisan ui:install --ai

# 3. Build & 起動
npm run build && php artisan serve

--ai を付けると AGENTS.md が repo ルートに展開される（Claude Code 用に CLAUDE.md への1行 import も追加）。

AGENTS.md

コンポーネント

46 中 9 つを抜粋 — サイドバーから任意のコンポーネントの全マトリクスを開ける
Form <x-button>

Button

Button 詳細を見る →
Data display <x-badge>

Badge

primary solid outline dot pill
Badge 詳細を見る →
Form <x-input>

Input

floating label · iconLeft prop

Input 詳細を見る →
Overlay <x-modal>

Modal

Alpine ベースの dialog。 focus trap · ESC · 背景クリックで dismiss。

Modal 詳細を見る →
Section <x-stepper>

Stepper

  1. 企画
  2. 2
    構築
  3. 3
    出荷
Stepper 詳細を見る →
Form <x-rating>

Rating

星
half · ハート
Rating 詳細を見る →
Form <x-toggle>

Toggle

Toggle 詳細を見る →
Form <x-input-number>

Input Number

Alpine ベースの ± · 上下限クランプ付き

Input Number 詳細を見る →
Overlay <x-tooltip>

Tooltip

下のボタンをホバー:

Tooltip 詳細を見る →

最新リリース

リリース一覧
v0.10.8 Feature

ビューポートより縦長のモーダルでも保存・キャンセルが常に押せるように

<x-modal> の panel がビューポートより縦長になると上下が切れ、actions slot の保存/キャンセルボタンが画面外に出て押せなくなる問題を修正。panel を viewport 内に収め、本文だけがスクロールする body ラッパー（min-h-0 overflow-y-auto）を新設 — header と actions は常に固定表示。収まる場合の描画は従来と同一。

リリース — 2026-08

v0.10.4 Fix

File Upload がローカライズと Livewire モーダルに対応

dropzone の「Browse / or drag and drop here」を browse-label / drop-hint props で自由な文言に差し替え可能に。ファイル選択時には file-upload-change CustomEvent が bubbling で発火し、teleport されたモーダル内でも $wire.upload() に直結できる。あわせて app ブランドテーマ nonblok / nonblok-dark を追加、テーマ数は合計40種に。

リリース — 2026-08

v0.10.1 Feature

連結 UI の境界線を総点検・修正

<x-pagination>・<x-button-group>・<x-stat-group> のように要素を1本の枠につなぐ UI で、アクティブな要素の縁が太く見える・選択中セグメントの縁が灰色に残るといった境界線の欠陥を、全ページ × テーマ/tune の computed-style 監査で洗い出してまとめて修正。

リリース — 2026-08

新機能・新テーマを、 先に受け取る

Pinion UI のアップデートと、 開発中のフレームワーク Laravel Sparrowhawk の先行体験のご案内。

確認メールを送りました。 メール内のリンクをクリックすると登録完了です。

送信できませんでした。 こちらのページから登録できます。

月1〜2通。 いつでも配信を停止できます。

いざ実装へ

パッケージを取得し、 コンポーネントを眺め、 UI を出荷しよう。

GitHub Packagist sparrowhawk-labs.dev pinion-icons

MIT ライセンス · Sparrowhawk Labs より を込めて

Powered by Yakaze Tech Studio