Getting started

https://chakra-ui.com/docs/getting-started

Color Mode

https://chakra-ui.com/docs/features/color-mode

ダークモードに簡単にできる。
Nextjsの場合、

• ColorModeScriptを_document.jsに追加する
• ChakraProviderのthemeに設定する

のどちらかを用意すれば実現できるんだけど後者だけじゃだめなんだろうか。

Responsive Styles

https://chakra-ui.com/docs/features/responsive-styles

なるほど
https://chakra-ui.com/docs/features/responsive-styles#under-the-hood

カスタムフックも使えそう。resize時とかの処理に。
https://chakra-ui.com/docs/hooks/use-breakpoint-value

非表示処理もできると。

<Center h={"100vh"} display={["flex", "none"]}>

https://chakra-ui.com/docs/components/other/show-hide

the-sx-prop

https://chakra-ui.com/docs/features/the-sx-prop

https://zenn.dev/terrierscript/books/2021-05-chakra-ui/viewer/1-8-1-sx

インラインスタイルのようなもので、例えばまだChakra UIが対応してないプロパティを使いたい場合などに扱えます。

Stack

基本これで良さそう
https://chakra-ui.com/docs/layout/stack

比較
https://chakra-ui.com/docs/layout/flex#flex-and-spacer-vs-grid-vs-stack

Toast

https://chakra-ui.com/docs/feedback/toast
モードレスな完了メッセージとか。

Transitions

https://chakra-ui.com/docs/components/transitions
Fadeとか。

Clipboard Copy

めっちゃ使えそう
https://chakra-ui.com/docs/hooks/use-clipboard

useConst

へー、初期値設定のためだけのカスタムフック。
useStateでもできるけど変更しないなら無駄だよね？みたいなことか。
https://chakra-ui.com/docs/hooks/use-const

Chakra UI Components 実装参考

https://chakra-templates.dev/

https://pro.chakra-ui.com/components

React Hook Form

https://chakra-ui.com/guides/integrations/with-hook-form

• x react-datepicker

https://gist.github.com/igoro00/99e9d244677ccafbf39667c24b5b35ed

Centering

https://qiita.com/piyonakajima/items/1b48a42a7a6e44bc57c9

themeデフォルト値
https://chakra-ui.com/docs/styled-system/theming/theme