LoginSignup
1
0

はじめに

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

choc-uiとは

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

image.png

実際に使ってみた

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

image.png

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

image.png

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

使用前

image.png

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

image.png

おわりに

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

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0