チームブロック
チームメンバーや経営陣を紹介します。 ネオブルータリズム調のすぐ使える React UI ブロックです。ヒーロー、料金、認証、ダッシュボードなど。あらゆる画面サイズでプレビューし、コードをコピーするか、MCP サーバー経由で AI エージェントからインストールできます。Radix UI・Base UI・React Aria に対応。
- Hero・料金・認証
- すべてのブレークポイントをプレビューする
- ソースをコピーする
- MCP インストール準備完了
- Radix · Base UI · React Aria
- 158 既製のブロック
- 出荷されるページセクション
- ダッシュボードとマーケティング
- Pro コードのロックを解除する
- ドロップインレイアウト
すべてのレイアウトを参照
チーム
11 個のブロック、任意のカードをクリックして全画面プレビュー、コード、インストール手順を表示。
- 01Pro
カラーブロックチームカード
1人ずつ背景を切り抜いたポートレートを単色パネルの上に立たせ、下に名前・役職・略歴・SNSボタンを配置します。React・Tailwind製、パレットは並べ替え可能。
- 02Pro
4カラムチームカード
ブランドカラーで塗った4枚のカードにフレームなしでポートレートを直接乗せ、下端にSNSボタンを配置します。React・Tailwind製、リーダー4人を追加するだけ。
- 03Pro
フル幅チームバンド
淡色のレールを両端に持つ全幅の暗色バンドに、隙間なく並ぶ3枚のカードを収め、ページに断絶を作ります。React・Tailwind製、長いページに区切りを。
- 04Pro
ホバー表示チームグリッド
名前と役職はプレートに常時表示され、ホバーやキーボードフォーカスで略歴が写真に重なります。全タイルがリンク。React・Tailwind製、各プロフィールへリンクを。
- 05Pro
イラストチームストリップ
顔写真の代わりにイラストアバターを使い、ページ全幅の罫線で区切ったストリップに配置。SNSリンクなし。React・Tailwind製、ベクター画像に差し替え可能。
- 06Pro
写真タイルチームグリッド
縁なしのポートレートタイルの下部に、名前・役職・略歴・リンクを載せたカードを浮かせて配置。React・Tailwind製、写真さえ用意すればすぐ使えます。
- 07Pro
ジグザグポートレートウォール
固定幅のポートレートタイルを折り返す行に並べ、1つおきに下げて上端をジグザグにします。React・Tailwind製、人数は奇数に保つのがコツです。
- 08Pro
SNSバー付きチームカード
色の上に立つ切り抜き写真、役職バッジと略歴、そして均等分割のSNSバーで締めくくる3枚組。React・Tailwind製、aboutページに最適です。
- 09Pro
SNSリンクチームカード
略歴なし。正方形アバター、名前、役職、5種のSNS行だけで、各カードが連絡先になります。React・Tailwind製、アカウントを貼り付けるだけ。
- 10Pro
チームディレクトリカード
丸いアバターと1行の説明の横に、プロフィール表示とメッセージ送信という2つの操作を配置。React・Tailwind製、mailtoリンクを接続するだけ。
- 11Pro
2カラムチーム名簿
最も密度の高いレイアウト。ポートレートの横に1行1単語で積んだ名前、スラッシュ付き役職と略歴を1つの罫線ボックスに収めます。React・Tailwind製、2人ずつ追加を。