Cards
外观 = 默认 / 浮起 / 填充 / base-100 / base-200 / base-300 / 轮廓 / 柔和 / 实心 / 顶部边框 / 幽灵 — 支持分隔线开关
Default / Elevated / Filled / Ghost
Default
base-100 + base-content/10 border。
Elevated
shadow で浮き上がる。
Filled
base-200 背景、border なし。
Ghost
完全に透明。
Base-100 × color
primary
primary surface に colored title。
accent
primary surface に colored title。
success
primary surface に colored title。
warning
primary surface に colored title。
Base-200 × color (on base-200 surface)
primary
surface 上で違和感なく溶け込む。
info
surface 上で違和感なく溶け込む。
success
surface 上で違和感なく溶け込む。
error
surface 上で違和感なく溶け込む。
Base-300 × color (on base-300 surface)
primary
tertiary surface (sidebar 等) に最適。
accent
tertiary surface (sidebar 等) に最適。
warning
tertiary surface (sidebar 等) に最適。
neutral
tertiary surface (sidebar 等) に最適。
Outline × color
primary
outline カラーを primary に。
success
outline カラーを success に。
warning
outline カラーを warning に。
error
outline カラーを error に。
Soft × color
primary soft
tinted background + colored text.
info soft
tinted background + colored text.
success soft
tinted background + colored text.
warning soft
tinted background + colored text.
Solid / Bordered-top
Solid Primary
CTA 用の強調カード。
Solid Neutral
ダーク系の強調。
Bordered-top Info
上部アクセントバー。
Bordered-top Success
Preline 風の上線。
No divider (divider=false)
Default + no divider
区切り線を非表示。視覚階層のみで構成。
Elevated + no divider
shadow だけで浮かせ、内部は line なし。
Base-100 + no divider
colored title + divider なし。
Hoverable / with footer
pinion-ui
Laravel Blade UI kit
theme × tune の直交 2 軸で無限の見た目を表現。
Pro プラン
¥2,980/月
- • 無制限コンポーネント
- • 優先サポート
- • カスタム tune