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

文字色と枠線が、どのテーマでも読める濃さに

文字・枠線・リング・進捗バーなど「線」として使う secondary / accent / neutral / info / success / warning / error が、primary と同じ規則で --pn-ink-<name> に解決されるようになりました（110 のテーマすべてで 4.5:1 以上）。text-warning の黄色は白地でオリーブに寄り、ダークテーマの text-neutral は読める灰色に。塗りの bg-warning ボタンは黄色のまま。あわせて solid の面と、hover で塗られる outline の面に出ていた 1px の縁を消しました（v0.23.1–0.23.2）。マークアップの変更は不要です。

リリース — 2026-10

v0.22.0 Feature

生成りの地にココア色の文字、ふっくら丸い粘土風の見た目 — やわらかい診断やフォームを、属性 2 つで親しみやすく組めるように

Mood に macaron / macaron-dark を、チューンに plush を追加 — macaron はクリーム地（#F7F1E8）× ココア文字にデニムの primary・セージの secondary・テラコッタの accent、plush は soft をもとに角丸を約 22px に広げ、2 層のやわらかい影と Fredoka / Nunito / M PLUS Rounded 1c の丸い書体をまとわせます。ラインナップは 55 テーマ × 13 チューンになり、右上の切替にも自動で並びます（既存のテーマ・チューンの値は不変）。

リリース — 2026-10

v0.19.0 Feature

温かい紙とインクの Tonal テーマ — 赤は警告ランプとしてだけ灯るので、静かな画面でも 1 つの異常が確実に目立つように

Tonal に signal / signal-dark を追加 — 無彩色の温かい紙（#F2F2EF）× インク（#0D0D0D）で、primary / secondary は地から 1 段ずらした紙のトーン、accent は深いグレー。赤（#E0322B）は error のステータス色にだけ使われるので、面やリンクではなく「表示灯」として読めます。ダークでは紙とインクが反転します。ラインナップは 54 テーマ（ライト / ダーク 108 種）になり、テーマ切替にも自動で並びます。

リリース — 2026-09

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

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

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

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

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

いざ実装へ

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

GitHub Packagist sparrowhawk-labs.dev pinion-icons

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

Powered by Yakaze Tech Studio