Chakra UI は UI ライブラリの一つでコンポーネントを利用して効率よくユーザインターフェイスを構築することができます。Chakra UI には 1 つのコンポーネントから作成できる Button コンポーネントから複数のコンポーネントを組み合わせて作成できる Modal コンポーネントまで用途毎にさまざまなコンポーネントが提供されています。どのようなコンポーネントが提供されているのかはドキュメントの Components ページから一覧で確認することができます。 コンポーネント一覧 Chakra UI は React だけではなく Vue でも利用することができますが、本文書では React を利用して動作確認を行なっているので React の知識があることを前提としています。提供されているコンポーネントの数も多いので利用頻度の高いコンポーネントを利用して Chakra UI の
第3チームのフロントエンドを中心に業務をしている赤星です。 弊社のOfferBoxでは一部に Chakra UI を利用しているのですが、先日Chakra UIのバージョンをv2からv3にアップデートした際にとてもアップデート作業に苦労しました。 Chakra UIのv3は大幅な破壊的変更があり、公式リファレンスもどのようにコンポーネントをカスタマイズするのか各コンポーネントごとに解説しなくなったのでここで詳しく説明していこうと思います。 コンポーネントカスタマイズ方法の変更（v2→v3） ChakraProviderの変更 extendThemeからcreateSystemへ コンポーネントのカスタマイズ方法 recipesとslotRecipes 見分け方 recipesのカスタマイズ slotRecipesのカスタマイズ 1. Chakra UIの元になっているArk UIのリファレ
はじめに こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉） 今回は、2024年10月にメジャーアップデートされたChakra UIの変更点が思いの外多かったので、簡単にではありますがまとめました。 （足りない情報があればコメント等で教えていただけますと幸いです🙇） この記事で取り上げる変更点 使用するパッケージ Theme、Recipe Components 使用するパッケージ V3では @emotion/styledとframer-motionパッケージが使用されません。 また、@chakra-ui/next-jsも不要になりました。（asChildpropsの登場により） そのため、インストールするときは以下のコマンドでインストールします。
Chakra UI Time Scroller: This is a clean time picker/scroller built for javascript and typescript with chakra-ui. Chakra UI Pro: Beautiful and responsive React components to build your application or marketing pages quicker. Created by the makers of Chakra UI. Chakra Templates: A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project. Choc UI: A s
We recommend using the LLMs.txt files to make the Chakra UI v3 documentation available to large language models. Update PackagesRemove the unused packages: @emotion/styled and framer-motion. These packages are no longer required in Chakra UI. npm uninstall @emotion/styled framer-motionInstall updated versions of the packages: @chakra-ui/react and @emotion/react. npm install @chakra-ui/react@latest
はじめまして。去年の８月からスペースマーケットのフロントエンドチームにJoinしましたsei63です。 アイコンから分かるように星のカービィが好きなもので、星のカービィ ディスカバリーの発売をwktkで楽しみにしています。 コピー能力が進化するなんて。。。さらに育成要素も入れてくるとは思いませんでした。 styled-componentsの課題スペースマーケットでは長らく styled-components を使ってきましたが、タグ一つ一つに対してスタイルを当てるようなインターフェースの為以下のような課題感がありました。 1.個別にスタイルを当てる都合上、命名が無理やりなものになっていく const StyledListHeading = styled.div` // リスト要素の見出しのテキストのスタイル `; const StyledListHeadingEmphasis = styl
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.5.2 Node.js 16.11.1／npm 8.0.0 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.10 Webアプリ制作時に嬉しいコンポーネントとHooks 前回に引き続き、今回もChakra UIについて解説します。Chakra UIは、React向けのUIライブラリとしては後発の部類ですが、Webアプリケーション制作で必要となるコンポーネントを多く備えていることからか、たくさんの採用事例が現れました。最近だとメルカリShopsのフロントエンド実装で採用されたのが記憶に新しいですね。 どんなコンポーネントやHoo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
