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 · 990 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つのコードから
990通りのプロ品質
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.17.0 Feature

primary 色のテキスト・枠線・フォーカスリング・ソフトバッジが、Tonal 系を含む全テーマでマークアップ変更なしに読めるように

各テーマに --pn-ink を追加 — primary が文字として十分なコントラスト（4.5:1 以上）を持つテーマではそのまま、足りないテーマ（Tonal 系や pop / vapor など）では明度を base-content 側へ寄せて 5.0:1 まで確保した「読める primary」です。text-primary / border-primary / ring-primary / bg-primary/N（N ≤ 50）などの前景用ユーティリティはプリセットが自動でこの色に振り替え、プログレスバーやステッパー・タイムラインの接続線も bg-ink-primary で描かれます。面としての bg-primary はそのままなので、既存のマークアップは 1 行も変えずに済みます。

リリース — 2026-09

v0.15.0 Feature

同系色でまとめたトーナル系テーマ 6 対が加わり、主張しない「地」のような配色を選べるように

テーマ切替に新カテゴリ Tonal を追加 — carbon / glyph / noir（無彩色 3 種）と、既存テーマから派生した tide（solar）/ nocturne（neotokyo）/ clay（ember）の計 6 対（ライト / ダーク）で、primary・secondary・accent がベースと同じ色相に揃います。ダークでは primary が暗いトーンのまま保たれるため、サイドバーのレールや primary ボタンが明るい面に反転しません。<x-theme-tune-switcher> には新グループが自動で並び、ラインナップは 46 対（92 テーマ）になりました。

リリース — 2026-09

v0.13.0 Feature

サイドバー下部やフォーム行で、ドロップダウンを親幅いっぱいに広げられるように

<x-dropdown> に block を追加 — ルートが親幅いっぱいになりパネルも両端に揃うので、サイドバーのアカウントメニューやフォーム行に width の計算なしで置けます。あわせてメニュー行をグループ分けする <x-menu-divider>（パネル両端まで届く区切り線）を新設し、<x-theme-tune-switcher> には align="left" を追加 — 画面左端（サイドバー下部など）に置いても 256px のパネルが画面外へはみ出しません。

リリース — 2026-09

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

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

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

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

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

いざ実装へ

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

GitHub Packagist sparrowhawk-labs.dev pinion-icons

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

Powered by Yakaze Tech Studio