はじめに

現在React×TypeScript×Chakura UIでアプリを作成中です。
最低限の機能実装が終わり、レイアウトを整えている段階で初めてテンプレートを使いました。
Chakura UIのテンプレートは幾つかありますが、今回は無料で良い感じのデザインが作成できるchoc-uiを使ってみました。

choc-uiとは

Chakra UI コンポーネントの一種です。前述のとおり、基本的に無料で使用可能です。
あくまでも所感ですが、全体的にスタイリッシュなデザインだと思います。（好みです）

実際に使ってみた

今回は投稿記事表示欄を良い感じのデザインにしていきます。
HP上で使用したいコンポーネントの右側にあるアイコンをクリックすると、CodeSandboxの画面に遷移します。

CodeSandbox上にこのような形でソースコードが展開されているので、コピペして使っていきます。

なお、今回はCardコンポーネントのテンプレートを使ってみました。

使用前

使用後　（まだ修正の余地はありますが。。）

おわりに

私はデザインに対してかなり疎い人間なので（後々しっかり勉強したいと思ってます！）、一から構想を練るのは難しい状態にありました。
なので、このようなテンプレを使用できるのはめちゃくちゃありがたいと思います。

参考