統計ブロック
統計や指標を表示するコンポーネント。 ネオブルータリズム調のすぐ使える React UI ブロックです。ヒーロー、料金、認証、ダッシュボードなど。あらゆる画面サイズでプレビューし、コードをコピーするか、MCP サーバー経由で AI エージェントからインストールできます。Radix UI・Base UI・React Aria に対応。
- Hero・料金・認証
- すべてのブレークポイントをプレビューする
- ソースをコピーする
- MCP インストール準備完了
- Radix · Base UI · React Aria
- 158 既製のブロック
- 出荷されるページセクション
- ダッシュボードとマーケティング
- Pro コードのロックを解除する
- ドロップインレイアウト
すべてのレイアウトを参照
統計
9 個のブロック、任意のカードをクリックして全画面プレビュー、コード、インストール手順を表示。
- 01Pro
エリアチャート統計
7日分の売上とコストのエリアチャートが、累計値とその変化バッジと同じカードに収まり、下に4つの数値。React・Tailwind製、trend配列を差し替えるだけ。
- 02Pro
Bento統計ボード
深掘りリンクで終わる2枚の細いカードの隣に、見出しの数値を運ぶ横幅2倍のブランドカード。React・Tailwind製、リンクをレポートに向けるだけ。
- 03Pro
コンパクトアイコン統計行
このセットで最も短い統計帯: 4枚のカードそれぞれがアイコンタイル、数値、二語のラベルだけを持つ。React・Tailwind製、ヒーローの下に滑り込ませるだけ。
- 04Pro
区切り統計パネル
フルブリードのカラー帯で、3つの数値が2pxの罫線で分けられた1枚のパネルを共有する。React・Tailwind製、コピーを変えてセクション間に置くだけ。
- 05Pro
ドーナツチャート統計
満足度スコアを穴の中に文字で入れたドーナツを、黒と白が交互になった4枚のカードで挟む。React・Tailwind製、1つの配列で比率を変えるだけ。
- 06Pro
訴求文付き統計モザイク
訴求は片側、証拠はもう片側: 見出しと2つのボタンの隣に、丈の異なるタイルからなるモザイク。React・Tailwind製、タイルのバランスを必要に応じて調整。
- 07Pro
トレンド矢印付き統計
各カードが円形のトレンド矢印と前年比の変化を1つの共通基準線に固定する。React・Tailwind製、各トレンドの上下を設定するだけ。
- 08Pro
店舗指標ダッシュボード
日・週・月・年の切り替えで4枚のKPIカードが入れ替わり、その下に売上内訳と人気商品リストが並びます。React・Tailwind製、figuresオブジェクトを差し替えるだけ。
- 09Pro
ハイライト統計カード
ぼかしテクスチャの上に3枚の指標カードを並べ、1枚だけをブランドカラーで塗って視線を導きます。React・Tailwind製、highlightフラグを動かすだけ。