Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク

2023/06/21 16 users フレームワーク Panda CSS README パンダ 特徴

🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README か... 続きを読む

Chakra UI - Figma Plugin

2023/01/12 15 users

Convert Figma Designs to Chakra UIGet production-ready code direct from Figma, and accelerate your development process 続きを読む

Chakra UIを薄く軽量に使う

2022/07/26 5 users

はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 ＠chakra-ui/reactではなく@chakra-ui/providerのChakraProviderを使う themeはextendThemeを使わずcomponentsのthemeを外す @chakra-ui/cliで必要な分だけの型生成を行う 実装例... 続きを読む

styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com

2022/03/19 8 users styled-components CSSTYPE 複数

3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安... 続きを読む

Chakra UI で MDN Web Docs の CSS レイアウト料理帳 をやってみた | DevelopersIO

2021/10/26 6 users DevelopersIO MdN MDN Web Docs

はじめに おはようございます、もきゅりんです。 月からの啓示を受けて、Chakra UI の学習していました。 遥か昔に学習した CSS がまるで記憶になかったので、CSS: カスケーディングスタイルシート | MDN でざっと復習しました。 そして、コンテンツ内にある CSS レイアウト料理帳を見て、これを Chakra UI で対応してみ... 続きを読む

Chakra UI ではじめる Tailwind CSS へのささやかな抵抗 / Modest resistance to Tailwind CSS starting with Chakra UI - Speaker Deck

2020/12/18 17 users Speaker Deck Tailwind CSS

Transcript Chakra UI Ͱ͸͡ΊΔ Tailwind CSS ΁ͷ͞͞΍͔ͳ఍߅ UIT meetup vol. 11 ϑϩϯτΤϯυߚനLT߹ઓ 2020/12/18 @spring-raining 1 ͋ͳͨ୭ʁ • HN: ͸Δ͞Ί @spring-raining • LINE ϑϩϯτΤϯυΤϯδχΞ • ࠷ۙ͸SVGͷdଐੑΛோΊΔ࢓ࣄΛ͍ͯ͠·͢ 2 ฏ࿨ͳCSS in JSଜʹ ͋Δ೔ࠇધ͕΍͖ͬͯͨ 3 4 ＿＿＿ 　　　　　　　／　　 　 　＼ ／ノ　　＼　　 u. ＼　！？ 　　　　／ （•） 　（•） 　　　＼... 続きを読む