Chakra Ui

AI

Modern interfaces for AI-powered features and interactive experiences.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• AI チャット・プロンプト入力 UI を構築するとき
• コード生成 + プレビューの並列表示が必要なとき
• AI Studio / Playground のようなインタラクティブ画面を作るとき
• アクションボタン付きのプロンプト入力フォームが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

App Headers

Page headers for application interfaces with actions, breadcrumbs, search, and forms.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• Dashboard やアプリケーション画面のページタイトル部分を構築するとき
• ページヘッダーにアクションボタン（作成・編集・削除など）を配置したいとき
• パンくずリスト付きのヘッダーが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Integrations

Components for managing third-party app integrations and connected services.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• サードパーティ連携の一覧・管理画面を構築するとき
• Slack, GitHub, Jira など外部サービスとの接続設定 UI が必要なとき
• インテグレーションのオン/オフ切り替え画面を作るとき
• 連携アプリのカード形式一覧や詳細設定画面が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

App Navbars

Application navigation bars with user menus, notifications, search, and dashboard navigation.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• SaaS アプリケーションのトップナビゲーションバーを構築するとき
• 検索バー付きのナビゲーションが必要なとき
• マルチレベル（階層型）のナビゲーション構造が必要なとき
• ユーザーメニューや通知アイコンを含むヘッダーナビを配置するとき

MCP Parameters

Tool: get_component_templates

Variants

Authentication

Secure and seamless user authentication flows supporting multiple sign-in methods.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• ログイン・サインアップページを構築するとき
• メール + パスワード認証フォームが必要なとき
• OTP（ワンタイムパスワード）認証画面を作るとき
• ソーシャルログイン（Google, GitHub 等）ボタン付きフォームが必要なとき
• Web3 ウォレット接続付きログインを構築するとき
• ワークスペース選択付きログインフローが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Banners

Strategic message displays that capture attention through prominent placement at key page locations.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• ページ上部にプロモーション・告知バナーを表示するとき
• Cookie 同意バナーが必要なとき
• サインアップ促進バナーを配置するとき
• リンク付きや問い合わせ誘導付きのバナーが必要なとき
• キャンペーン・セール告知バナーを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Blog

Engaging blog layouts to share articles, news, and stories with your audience.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• ブログ記事一覧ページを構築するとき
• 2 カラム・3 カラムのブログカードレイアウトが必要なとき
• フィーチャード記事（大きな画像付き）の表示が必要なとき
• ヒーロー画像付きのブログセクションを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Cards

Elegant containers that organize and display content in a clean, structured format.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• コンテンツをカード形式で表示するとき（ブログ、料金、プロジェクトなど）
• 認証カード、決済カード、通知カードなど用途別のカードが必要なとき
• EC サイトの商品カードを作るとき
• タブ付きカードやドキュメント共有カードが必要なとき
• 問題報告・Issue 報告フォームをカード形式にしたいとき

MCP Parameters

Tool: get_component_templates

Variants

Careers

Components for showcasing job openings and career opportunities.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• 採用情報・求人一覧ページを構築するとき
• 職種カードの 2 カラムレイアウトが必要なとき
• アコーディオン形式の求人リストを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Charts

Components for visualizing data through charts and graphs.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• ダッシュボードにチャートやグラフを配置するとき
• KPI やメトリクスのデータ可視化が必要なとき
• レポート画面にグラフウィジェットを追加するとき

MCP Parameters

Tool: get_component_templates

Variants

Contact

User-friendly contact forms and sections to help users reach out to you.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• お問い合わせフォームを構築するとき
• ダイアログ（モーダル）形式のコンタクトフォームが必要なとき
• 画像付きのお問い合わせページを作るとき

MCP Parameters

Tool: get_component_templates

Variants

CTA

Components for driving user action and engagement.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• ページ内に目立つ行動喚起（CTA）セクションを配置するとき
• 「今すぐ始める」「無料トライアル」などのアクションを促す領域が必要なとき
• ニュースレター登録や問い合わせへの誘導セクションを作るとき
• ページ末尾のコンバージョン促進セクションが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Dividers

Components for separating sections and content on your website.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• セクション間の区切り線にアクションを追加したいとき
• 「もっと見る」ボタン付きのディバイダーが必要なとき
• テキストラベル付きの区切り線（例: 「または」）を配置するとき
• アイコンボタンやボタングループ付きの区切り線が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Changelog

Components for displaying a changelog with version history and updates.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• 変更履歴・リリースノートページを構築するとき
• バージョン別のアップデート一覧を表示するとき
• タイムライン形式の Changelog セクションが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Code Block

Components for displaying code snippets with syntax highlighting.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメント内にシンタックスハイライト付きのコードブロックを表示するとき
• コピーボタンや行番号付きのコード表示が必要なとき
• 複数言語タブ切り替えのコードスニペットを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Example Preview

Interactive components that showcase code examples with live preview and code view toggle.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメント内にライブプレビュー + コード表示の切り替え UI を作るとき
• コンポーネントのデモ表示が必要なとき
• インタラクティブなコード例の表示が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Header

Documentation page headers with breadcrumbs, titles, and API endpoint displays.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメントページのヘッダー（タイトル + パンくずリスト）を構築するとき
• API リファレンスのエンドポイント表示ヘッダーが必要なとき
• アクションボタン付きのドキュメントヘッダーを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Navbar

Components for navigating through documentation pages.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメントサイトのトップナビゲーションを構築するとき
• 検索・バージョン切り替え付きのドキュメントナビバーが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Pagination

Components for navigating through paginated documentation content with previous/next controls and page indicators.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメントページの前後ナビゲーション（前のページ/次のページ）を構築するとき
• ページインジケーター付きのページネーションが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Parameter Field

Components for displaying and editing parameters in API requests.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• API ドキュメントのパラメータ表示 UI を構築するとき
• リクエスト/レスポンスのフィールド一覧を表示するとき
• 型情報・必須/任意ラベル付きのパラメータテーブルが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Sidebar

Components for organizing and navigating documentation with hierarchical sections, collapsible groups, and active link states.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメントサイトのサイドバーナビゲーションを構築するとき
• 階層的なセクション構造のサイドメニューが必要なとき
• 折りたたみグループやアクティブリンク状態を持つサイドバーを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Step

Documentation page step blocks for guiding users through processes with numbered steps and descriptions.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ステップバイステップのガイドを構築するとき
• 番号付きの手順説明セクションが必要なとき
• セットアップやチュートリアルのプロセス表示を作るとき

MCP Parameters

Tool: get_component_templates

Variants

Docs Table of Contents

Components for displaying a table of contents.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

documentation

When to Use

• ドキュメントページの目次（Table of Contents）を構築するとき
• サイドバーやモバイル向けの目次ナビゲーションが必要なとき
• 番号付き・ライン付きの目次スタイルが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

FAQs

Components for displaying frequently asked questions and answers.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• FAQ（よくある質問）セクションを構築するとき
• アコーディオン形式の Q&A ページが必要なとき
• インライン見出し付きの FAQ レイアウトを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Features

Components for showcasing your platform's key features.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• プロダクトの機能紹介セクションを構築するとき
• アイコン + テキストの機能一覧を作るとき
• Bento グリッドレイアウトの機能ショーケースが必要なとき
• ランディングページの「特徴」セクションを実装するとき

MCP Parameters

Tool: get_component_templates

Variants

Feeds

Dynamic components for real-time chat interfaces and activity stream presentations.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• アクティビティフィード・タイムラインを構築するとき
• コメント付きのフィード（SNS 風）が必要なとき
• 投票（upvote）機能付きのフィードを作るとき
• ユーザー投稿の一覧表示が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Footers

Essential bottom sections featuring navigation, contact details, and vital site-wide information.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• サイトフッターを構築するとき
• 複数カラムのリンク付きフッターが必要なとき
• SNS リンク付きフッターを作るとき
• 住所・連絡先付きのフッターが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Help Center

Components for building a help and support center.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• ヘルプセンター・サポートページを構築するとき
• カテゴリ別のヘルプ記事コレクションを表示するとき
• ヘルプセクションのカード・リスト表示が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Heroes

Bold, engaging hero sections designed to showcase your most compelling content.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• ランディングページのファーストビュー（ヒーローセクション）を構築するとき
• 画像・動画付きの大型ヘッダーセクションが必要なとき
• 検索バー付きのヒーローエリアを作るとき
• サインアップフォーム付きのヒーローが必要なとき
• CLI コマンド表示付きのプロダクトヒーローを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Layouts

Components for building complex page layouts and structures.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• アプリケーション全体のページレイアウト構造を決めるとき
• サイドバー + コンテンツの 2 カラムレイアウトが必要なとき
• マルチレベルナビバー付きレイアウトを構築するとき
• スティッキーナビバーやスティッキーサイドバーを含むレイアウトが必要なとき
• アプリの骨格（シェル）を素早く構築したいとき

MCP Parameters

Tool: get_component_templates

Variants

Logos

Displays a grid of your customers' or sponsors' logos.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• 導入企業・パートナーのロゴ一覧を表示するとき
• マーキー（自動スクロール）型のロゴ表示が必要なとき
• グリッドやカード形式のロゴ配置が必要なとき
• 「信頼されている企業」セクションを構築するとき

MCP Parameters

Tool: get_component_templates

Variants

Marketing Headers

Beautiful section headers for marketing pages with taglines, headlines, and descriptions.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• マーケティングページのページヘッダーやセクションヘッダーを構築するとき
• キャッチコピー + サブテキスト + CTA ボタンのヘッダーが必要なとき
• 検索バーやフォーム付きのページヘッダーを作るとき
• セクション見出しに CTA リンクを添えたいとき

MCP Parameters

Tool: get_component_templates

Variants

Marketing Navbars

Marketing navigation bars with call-to-action buttons and promotional links.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• マーケティング・LP サイトのナビゲーションバーを構築するとき
• CTA ボタン（サインアップ・お問い合わせ等）付きのナビバーが必要なとき
• アイランド型（浮遊型）のモダンなナビバーを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Notifications

Components for displaying notifications and alerts.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• 通知トレイ（ベルアイコンからのドロップダウン）を構築するとき
• 通知一覧の空状態・読み込み状態の UI が必要なとき
• フィルター付きやタブ付きの通知パネルを作るとき
• アプリ内通知センターを構築するとき

MCP Parameters

Tool: get_component_templates

Variants

Onboarding

Components for onboarding new users to your platform.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• 新規ユーザー向けのオンボーディングフローを構築するとき
• チェックリスト形式のセットアップガイドが必要なとき
• 画像や動画付きのウェルカム画面を作るとき
• ワークスペース作成・初期設定ウィザードが必要なとき
• ステップバイステップの初回設定フローを実装するとき

MCP Parameters

Tool: get_component_templates

Variants

Org Switcher

Components for switching between organizations and projects.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• マルチテナントアプリで組織（Organization）切り替え UI が必要なとき
• プロジェクトセレクターを構築するとき
• ワークスペース切り替えドロップダウンが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Pricing

Components for showcasing and comparing your pricing plans effectively.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• 料金プラン比較ページを構築するとき
• シンプルな料金表やアップグレード画面が必要なとき
• 月額/年額切り替えトグル付き料金表を作るとき
• シート数選択スライダー付きの料金計算 UI が必要なとき
• プラン間の機能比較テーブルを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Product Categories

Components for showcasing e-commerce product categories.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

e-commerce

When to Use

• EC サイトのカテゴリ一覧ページを構築するとき
• 商品カテゴリをグリッド形式で表示するとき
• カテゴリ画像付きのナビゲーションセクションが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Product Grid

Components for showcasing products in a grid format.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

e-commerce

When to Use

• EC サイトの商品一覧ページを構築するとき
• 商品カードをグリッド表示するとき
• 価格・画像・タイトル付きの商品リストが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Product Reviews

Components for displaying reviews of products.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

e-commerce

When to Use

• 商品レビュー・評価セクションを構築するとき
• 星評価付きのカスタマーレビュー一覧が必要なとき
• レビュー投稿フォーム付きのレビューページを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Profiles

Components for showcasing user profiles and profiles.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• ユーザープロフィールページを構築するとき
• アカウント情報の表示（アバター、名前、経歴、ステータスなど）が必要なとき
• 他ユーザーのプロフィール閲覧画面を作るとき
• チームメンバー詳細ページを構築するとき

MCP Parameters

Tool: get_component_templates

Variants

Property Panels

Components for editing entity properties.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• エンティティのプロパティ編集パネルを構築するとき
• 右ペインや詳細パネルでオブジェクトの属性を編集する UI が必要なとき
• Notion / Linear 風のプロパティサイドパネルを作るとき
• フォームフィールドを縦に並べた詳細編集パネルが必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Blocks

Settings

Components for managing user account settings and preferences.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• ユーザー設定画面を構築するとき（プロフィール、外観、言語、通知、プライバシーなど）
• API キー管理ページが必要なとき
• 請求・課金設定、シート管理、利用量表示を作るとき
• 監査ログ、セッション管理、ロール管理ページが必要なとき
• チーム管理（メンバー招待・権限設定）画面を作るとき
• Webhook 設定画面、データエクスポート画面が必要なとき
• 認証設定（2FA・SSO）画面を構築するとき

MCP Parameters

Tool: get_component_templates

Variants

Sharing

Components for sharing content with social media platforms.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• SNS シェアボタン・共有 UI を構築するとき
• コンテンツのリンク共有ダイアログが必要なとき
• ソーシャルメディアへの投稿共有機能を実装するとき

MCP Parameters

Tool: get_component_templates

Variants

Shopping Carts

Components for managing shopping cart functionality and displaying cart items.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

e-commerce

When to Use

• ショッピングカートページを構築するとき
• ミニカート（ヘッダーからのドロップダウン）が必要なとき
• カート内商品の一覧・数量変更・削除 UI を作るとき

MCP Parameters

Tool: get_component_templates

Variants

Sidebars

Versatile lateral components that enhance navigation and provide contextual information.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• アプリケーションのサイドナビゲーションを構築するとき
• 折りたたみ可能なメニューグループが必要なとき
• サイドナビバー + サイドバーの 2 カラム構成にしたいとき
• ダッシュボードやアドミン画面の左ペインとして使うとき

MCP Parameters

Tool: get_component_templates

Variants

Stats

Components for showcasing statistical data and metrics.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• 数値実績（ユーザー数、売上、導入企業数など）を表示するとき
• KPI やメトリクスをカード・ボーダー付きで並べるとき
• ロゴ付きの統計情報セクションを作るとき
• アイコン付きの目立つ統計表示が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Store Signup Offers

Components for offering discounts to users on signup.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

e-commerce

When to Use

• 新規会員登録時の割引オファーを表示するとき
• メールアドレス登録で割引クーポンを提供する UI が必要なとき
• EC サイトの初回購入促進ポップアップやセクションを作るとき

MCP Parameters

Tool: get_component_templates

Variants

Teams

Professional layouts to highlight your team members and build authentic connections with users.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• チーム紹介セクションを構築するとき
• メンバーのアバター・写真付き一覧が必要なとき
• カード形式やインライン形式のチーム表示を作るとき
• 大きな写真付きのチームメンバー紹介が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Testimonials

Components for showcasing customer testimonials and feedback.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

marketing

When to Use

• 顧客の声・レビューセクションを構築するとき
• ロゴ付きの顧客事例グリッドが必要なとき
• 評価（星）付きのテスティモニアルを表示するとき
• 統計データ付きの推薦文を作るとき
• カード形式やグリッド形式の口コミ表示が必要なとき

MCP Parameters

Tool: get_component_templates

Variants

Webhooks

Components for managing webhooks and real-time event integrations.

Note: Blocks require CHAKRA_PRO_API_KEY environment variable. If not set, block features are unavailable.

Group

application

When to Use

• Webhook 管理画面（一覧・作成・編集・詳細・テスト）を構築するとき
• Webhook の空状態やフォーム画面が必要なとき
• イベントログの表示 UI を作るとき
• Webhook テスター（テスト送信）画面が必要なとき
• Webhook エンドポイントの CRUD 操作画面を実装するとき

MCP Parameters

Tool: get_component_templates

Variants

Area Chart

Display quantitative data by filling the area between the line and axis, showing trends and patterns over time.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis } from "recharts"

export const AreaChartBasic = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
      { windows: 182, mac: 98, linux: 122, month: "June" },
    ],
    series: [
      { name: "windows", color: "teal.solid" },
      { name: "mac", color: "purple.solid" },
      { name: "linux", color: "blue.solid" },
    ],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <AreaChart data={chart.data} responsive>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Area
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            fillOpacity={0.2}
            stroke={chart.color(item.color)}
            stackId="a"
          />
        ))}
      </AreaChart>
    </Chart.Root>
  )
}

Chart.Root Props

Area Props (Recharts)

Notes

• Use stackId="a" on all <Area> elements to create a stacked area chart.
• Use Chart.Tooltip and Chart.Legend for themed tooltip and legend.
• For gradient fills, use Chart.Gradient inside an SVG <defs> block and reference its id in the fill prop.
• Built on Recharts AreaChart.

Related

• useChart
• Axes
• Cartesian Grid
• Line Chart
• Sparkline

Axes

Customize the X and Y axes of Recharts-based chart components using Chakra UI's chart utilities.

Import

import { XAxis, YAxis } from "recharts"
import { useChart } from "@chakra-ui/charts"

Usage

const chart = useChart({
  data: [
    { sales: 120, date: "2024-01-01" },
    { sales: 95,  date: "2024-02-01" },
  ],
  series: [{ name: "sales", color: "teal.solid" }],
})

// X-axis with date formatting
<XAxis
  axisLine={false}
  tickLine={false}
  dataKey={chart.key("date")}
  tickFormatter={chart.formatDate({ month: "short" })}
/>

// Y-axis with number formatting
<YAxis
  axisLine={false}
  tickLine={false}
  tickMargin={10}
  stroke={chart.color("border")}
  tickFormatter={(value) => `${value}%`}
/>

Common XAxis Props

Common YAxis Props

Notes

• Axes are provided by Recharts. For the full API, refer to the Recharts XAxis and YAxis documentation.
• Use chart.color("border") or chart.color("border.muted") for axis stroke colors to support light/dark mode.
• Use chart.formatDate({ month: "short" }) to produce locale-aware date tick labels.
• Set axisLine={false} and tickLine={false} for a cleaner look.

Related

• useChart
• Cartesian Grid
• Area Chart
• Bar Chart
• Line Chart

Bar Chart

Display categorical data using rectangular bars of varying heights or lengths.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

export const BarChartBasic = () => {
  const chart = useChart({
    data: [
      { allocation: 60, type: "Stock" },
      { allocation: 45, type: "Crypto" },
      { allocation: 12, type: "ETF" },
      { allocation: 4,  type: "Cash" },
    ],
    series: [{ name: "allocation", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data} responsive>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis axisLine={false} tickLine={false} dataKey={chart.key("type")} />
        <YAxis
          axisLine={false}
          tickLine={false}
          domain={[0, 100]}
          tickFormatter={(value) => `${value}%`}
        />
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

Chart.Root Props

Bar Props (Recharts)

Notes

• For horizontal bars, swap XAxis and YAxis and add layout="horizontal" to <BarChart>.
• For stacked bars, add the same stackId to all <Bar> elements.
• Built on Recharts BarChart.

Related

• useChart
• Axes
• Cartesian Grid
• Bar List
• Bar Segment

Bar List

Display categorical data with horizontal bars, showing comparisons between different categories or items.

Import

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

Usage

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

export const BarListBasic = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google",  value: 1200000 },
      { name: "Direct",  value: 100000 },
      { name: "Bing",    value: 200000 },
      { name: "Yahoo",   value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github",  value: 100000 },
      { name: "Yandex",  value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Bar />
        <BarList.Value />
      </BarList.Content>
    </BarList.Root>
  )
}

BarListData

interface BarListData {
  name: string
  value: number
  href?: string
}

Components

BarList.Root Props

BarList.Bar Props

BarList.Label Props

Notes

• Data is typed with BarListData (name, value, optional href).
• Bar widths are calculated automatically using chart.getValuePercent().
• sort in useChart can pre-sort data descending by value.
• Values are formatted using compact notation (chart.formatNumber({ notation: "compact" })).

Related

• useChart
• Bar Chart
• Bar Segment

Bar Segment

Display data as segments within a single horizontal bar, showing proportions and part-to-whole relationships between values.

Import

import { BarSegment, useChart } from "@chakra-ui/charts"

Usage

"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentBasic = () => {
  const chart = useChart({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google", value: 500000, color: "teal.solid" },
      { name: "Direct", value: 100000, color: "blue.solid" },
      { name: "Bing",   value: 200000, color: "orange.solid" },
      { name: "Yandex", value: 100000, color: "purple.solid" },
    ],
  })

  return (
    <BarSegment.Root chart={chart}>
      <BarSegment.Content>
        <BarSegment.Value />
        <BarSegment.Bar />
        <BarSegment.Label />
      </BarSegment.Content>
    </BarSegment.Root>
  )
}

With Tooltip and Legend

<BarSegment.Root chart={chart}>
  <BarSegment.Content>
    <BarSegment.Bar tooltip />
  </BarSegment.Content>
  <BarSegment.Legend showPercent />
</BarSegment.Root>

Data Shape

Each item in data must include name, value, and color:

{ name: string; value: number; color: ChartColor }

Components

BarSegment.Root Props

BarSegment.Bar Props

BarSegment.Legend Props

Notes

• Segment widths are calculated using chart.getValuePercent() against the value key.
• Each data item must include a color field referencing a Chakra color token.
• BarSegment.Reference renders an absolute-positioned vertical line at a given position.

Related

• useChart
• Bar Chart
• Bar List

Cartesian Grid

Customize the background grid of Recharts cartesian charts (AreaChart, BarChart, LineChart, ScatterChart).

Import

import { CartesianGrid } from "recharts"
import { useChart } from "@chakra-ui/charts"

Usage

const chart = useChart({ data, series })

<CartesianGrid
  stroke={chart.color("border.muted")}
  vertical={false}
/>

Props

Notes

• CartesianGrid is a Recharts component. For the full API, refer to the Recharts CartesianGrid documentation.
• Use chart.color("border.muted") for the stroke to automatically adapt to light/dark mode.
• Setting vertical={false} is a common pattern to show only horizontal lines for a cleaner chart.

Related

• useChart
• Axes
• Area Chart
• Bar Chart
• Line Chart

Donut Chart

Display data as segments of a circular chart with a hollow center (donut shape).

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"

export const DonutChartBasic = () => {
  const chart = useChart({
    data: [
      { name: "windows", value: 400, color: "blue.solid" },
      { name: "mac",     value: 300, color: "orange.solid" },
      { name: "linux",   value: 300, color: "pink.solid" },
      { name: "other",   value: 200, color: "green.solid" },
    ],
  })

  return (
    <Chart.Root boxSize="200px" chart={chart} mx="auto">
      <PieChart responsive>
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip hideLabel />}
        />
        <Pie
          innerRadius={80}
          outerRadius={100}
          isAnimationActive={false}
          data={chart.data}
          dataKey={chart.key("value")}
          nameKey="name"
          shape={(props) => (
            <Sector {...props} fill={chart.color(props.payload!.color)} />
          )}
        />
      </PieChart>
    </Chart.Root>
  )
}

With Centered Text

<PieChart responsive>
  <Pie
    innerRadius={80}
    outerRadius={100}
    data={chart.data}
    dataKey={chart.key("value")}
    nameKey="name"
    shape={(props) => (
      <Sector {...props} fill={chart.color(props.payload!.color)} />
    )}
  >
    <Label
      content={
        <Chart.RadialText
          viewBox={viewBox}
          title={chart.getTotal("value")}
          description="Total"
        />
      }
    />
  </Pie>
</PieChart>

Data Shape

{ name: string; value: number; color: ChartColor }

Pie Props (Recharts)

Chart.RadialText Props

Notes

• The donut hole is created by setting innerRadius greater than 0.
• Use a custom shape prop with <Sector> to apply per-segment colors from data.
• Chart.RadialText renders a centered label inside the donut hole.
• Built on Recharts PieChart.

Related

• useChart
• Pie Chart

Installation

Install the Chakra UI Charts package and its peer dependency recharts.

Install

npm i @chakra-ui/charts recharts

Basic Setup

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

export const MyChart = () => {
  const chart = useChart({
    data: [
      { value: 60, category: "A" },
      { value: 45, category: "B" },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data} responsive>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis axisLine={false} tickLine={false} dataKey={chart.key("category")} />
        <YAxis axisLine={false} tickLine={false} />
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

Notes

• Charts are built on top of Recharts. For advanced usage, refer to the Recharts documentation.
• The Chart namespace component (Chart.Root, Chart.Tooltip, Chart.Legend, etc.) integrates with Chakra UI's theming system.
• Charts automatically support light/dark mode through Chakra UI's color tokens.

Related

• useChart
• Area Chart
• Bar Chart
• Line Chart

Line Chart

Display data points connected by straight line segments, showing trends and patterns in continuous data over time or sequences.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"

export const LineChartBasic = () => {
  const chart = useChart({
    data: [
      { sale: 10, month: "January" },
      { sale: 95, month: "February" },
      { sale: 87, month: "March" },
      { sale: 88, month: "May" },
      { sale: 65, month: "June" },
      { sale: 90, month: "August" },
    ],
    series: [{ name: "sale", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <LineChart data={chart.data} responsive>
        <CartesianGrid stroke={chart.color("border")} vertical={false} />
        <XAxis
          axisLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
          stroke={chart.color("border")}
        />
        <YAxis
          axisLine={false}
          tickLine={false}
          tickMargin={10}
          stroke={chart.color("border")}
        />
        <Tooltip
          animationDuration={100}
          cursor={false}
          content={<Chart.Tooltip />}
        />
        {chart.series.map((item) => (
          <Line
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            stroke={chart.color(item.color)}
            strokeWidth={2}
            dot={false}
          />
        ))}
      </LineChart>
    </Chart.Root>
  )
}

Chart.Root Props

Line Props (Recharts)

Notes

• Set dot={false} for a clean line without data point markers.
• For multiple series on separate Y-axes, assign different yAxisId values and render two <YAxis> components.
• Built on Recharts LineChart.

Related

• useChart
• Axes
• Cartesian Grid
• Area Chart
• Sparkline

Pie Chart

Display data as segments of a full circular chart, showing proportional distribution.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector } from "recharts"

export const PieChartBasic = () => {
  const chart = useChart({
    data: [
      { name: "windows", value: 400, color: "blue.solid" },
      { name: "mac",     value: 300, color: "orange.solid" },
      { name: "linux",   value: 300, color: "pink.solid" },
      { name: "other",   value: 200, color: "green.solid" },
    ],
  })

  return (
    <Chart.Root boxSize="200px" mx="auto" chart={chart}>
      <PieChart responsive>
        <Pie
          isAnimationActive={false}
          data={chart.data}
          dataKey={chart.key("value")}
          shape={(props) => (
            <Sector {...props} fill={chart.color(props.payload!.color)} />
          )}
        />
      </PieChart>
    </Chart.Root>
  )
}

Data Shape

{ name: string; value: number; color: ChartColor }

Pie Props (Recharts)

Notes

• The key difference between Pie Chart and Donut Chart is innerRadius: set it to 0 (or omit it) for a solid pie, or set it to a positive value for a donut.
• Use a custom shape prop with <Sector> to apply per-segment colors from data.
• Built on Recharts PieChart.

Related

• useChart
• Donut Chart

Radar Chart

Display multivariate data as a two-dimensional chart on axes starting from the same point, useful for comparing multiple categories.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts"

export const RadarChartBasic = () => {
  const chart = useChart({
    data: [
      { windows: 110, month: "January" },
      { windows: 130, month: "February" },
      { windows: 110, month: "March" },
      { windows: 90,  month: "May" },
      { windows: 75,  month: "June" },
    ],
    series: [{ name: "windows", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxW="sm" chart={chart} mx="auto">
      <RadarChart data={chart.data} responsive>
        <PolarGrid stroke={chart.color("border")} />
        <PolarAngleAxis dataKey={chart.key("month")} />
        <PolarRadiusAxis />
        {chart.series.map((item) => (
          <Radar
            isAnimationActive={false}
            key={item.name}
            name={item.name}
            dataKey={chart.key(item.name)}
            stroke={chart.color(item.color)}
            fill={chart.color(item.color)}
            fillOpacity={0.2}
          />
        ))}
      </RadarChart>
    </Chart.Root>
  )
}

Radar Props (Recharts)

PolarGrid Props (Recharts)

PolarAngleAxis Props (Recharts)

Notes

• PolarAngleAxis defines the category labels around the perimeter.
• PolarRadiusAxis renders the radial scale lines; hide it with tick={false} for a cleaner look.
• Multiple <Radar> elements can be rendered for comparative visualization.
• Built on Recharts RadarChart.

Related

• useChart
• Area Chart
• Line Chart

Charts

Scatter Chart

Display the relationship between two numerical variables as a collection of points plotted on X and Y axes.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Scatter, ScatterChart, XAxis, YAxis } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Scatter, ScatterChart, XAxis, YAxis } from "recharts"

export const ScatterChartBasic = () => {
  const chart = useChart({
    data: [
      { temperature: 14.2, sales: 215 },
      { temperature: 16.4, sales: 325 },
      { temperature: 18.5, sales: 406 },
      { temperature: 22.1, sales: 522 },
      { temperature: 25.1, sales: 614 },
      { temperature: 23.4, sales: 544 },
    ],
    series: [{ name: "sales", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <ScatterChart responsive>
        <XAxis
          type="number"
          dataKey={chart.key("temperature")}
          stroke={chart.color("border")}
          tickFormatter={(value) => `${value}°C`}
          domain={[10, "dataMax + 3"]}
        />
        <YAxis
          type="number"
          dataKey={chart.key("sales")}
          stroke={chart.color("border")}
        />
        {chart.series.map((series, index) => (
          <Scatter
            name={series.name?.toString()}
            key={index}
            data={chart.data}
            fill={chart.color(series.color)}
            isAnimationActive={false}
          />
        ))}
      </ScatterChart>
    </Chart.Root>
  )
}

Scatter Props (Recharts)

XAxis / YAxis for Scatter

Both axes require type="number" for scatter charts, and the dataKey on each axis maps to the respective variable:

<XAxis type="number" dataKey={chart.key("temperature")} />
<YAxis type="number" dataKey={chart.key("sales")} />

Notes

• Unlike other cartesian charts, <Scatter> receives data directly rather than getting it from the parent chart.
• Set type="number" on both XAxis and YAxis for continuous numeric scales.
• Use domain on axes to control the visible range, e.g. [10, "dataMax + 3"].
• Built on Recharts ScatterChart.

Related

• useChart
• Axes
• Cartesian Grid
• Line Chart

Sparkline

A small, compact chart without axes or labels that shows the general shape of data variation, typically used inline with text or inside dashboard cards.

Import

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart } from "recharts"

Usage

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart } from "recharts"

export const SparklineBasic = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
      { value: 10 },
      { value: 18 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root width="28" height="12" chart={chart}>
      <AreaChart data={chart.data} responsive>
        {chart.series.map((item) => (
          <Area
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            fillOpacity={0.2}
            stroke={chart.color(item.color)}
            strokeWidth={2}
          />
        ))}
      </AreaChart>
    </Chart.Root>
  )
}

Bar Sparkline

A sparkline can also use BarChart for a bar-based compact chart:

import { Bar, BarChart } from "recharts"

<Chart.Root width="28" height="12" chart={chart}>
  <BarChart data={chart.data} responsive>
    {chart.series.map((item) => (
      <Bar
        key={item.name}
        isAnimationActive={false}
        dataKey={chart.key(item.name)}
        fill={chart.color(item.color)}
      />
    ))}
  </BarChart>
</Chart.Root>

Chart.Root Props

Notes

• Sparklines intentionally omit axes, grid, tooltip, and legend components.
• Use Chart.Root with fixed width and height (Chakra size tokens) rather than maxH for inline use.
• The underlying chart type can be AreaChart, BarChart, or LineChart depending on the desired visual.
• Suitable for embedding in tables, stat cards, or any space-constrained context.

Related

• useChart
• Area Chart
• Line Chart
• Bar Chart

Button

A versatile button component with multiple variants, sizes, and loading states. Also exports IconButton and ButtonGroup.

Import

import { Button, IconButton, ButtonGroup } from "@chakra-ui/react"

Usage

<Button>Click me</Button>

Props

Variants / Sizes

<Button variant="solid">Solid</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="surface">Surface</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="plain">Plain</Button>

Notes

• Use asChild to render as an anchor: <Button asChild><a href="/">Home</a></Button>
• loading prop disables the button automatically while showing a spinner
• Use ButtonGroup with attached for connected button groups
• Add icons before/after the label text directly as children

Related

• IconButton
• CloseButton
• DownloadTrigger

CloseButton

A button for dismissing or closing UI elements, renders an × icon by default.

Import

import { CloseButton } from "@chakra-ui/react"

Usage

<CloseButton />

Props

CloseButton inherits all Button / IconButton props:

Notes

• Renders an × (LuX) icon by default; override by passing children
• Used inside overlays such as Dialogs, Drawers, Alerts, and Toasts
• aria-label defaults to "Close" for accessibility

Related

• Button
• IconButton