タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
Chakra UI ではじめる Tailwind CSS へのささやかな抵抗 / Modest resistance to Tailwind CSS starting with Chakra UI
spring_raining (LINE株式会社) UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です https://uit.connpass.com/event/197740/
Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク
🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README からの抜粋となりますが、次のような特徴があります。 ⚡️ Write style objects or style props, extract them at build time → Style 用のオブジェクトや Props を定義してビルドで抽出 ✨ Modern CSS output — cascade layers @layer, css variables and more → Cascade Layers
Chakra UIを薄く軽量に使う
v2.4.2からChakraBaseProviderというものが追加されています。 これにはToastProviderが含まれており結果としてframer-motionがbundleされてしまうので、より軽量に使いたい方は本記事の内容を参考にしてみてください。 https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%402.4.2 はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 ＠chakra-ui/reactではなく@chakra-ui/providerのChakraProviderを使う themeはextendThemeを使わずcomponentsのthemeを外す @chakra-ui/cliで
EDIT: An additional project has been added as an example: Apartmentfy If you want to build an application or a website you need to take care of many things and in that sea of options which component library, css or ui framework will take a big role in the final version of your product. I have tried some component libraries like Material UI, Antd, React Boostrap and other CSS frameworks like styled
Chakra UI で MDN Web Docs の CSS レイアウト料理帳 をやってみた | DevelopersIO
はじめに おはようございます、もきゅりんです。 月からの啓示を受けて、Chakra UI の学習していました。 遥か昔に学習した CSS がまるで記憶になかったので、CSS: カスケーディングスタイルシート | MDN でざっと復習しました。 そして、コンテンツ内にある CSS レイアウト料理帳を見て、これを Chakra UI で対応してみるときっと良い総まとめになるゾ！と思ってやってみました。 そして、ついでにブログにしました。 ソースは こちら です。 なお、自分は AWSのソリューションアーキテクトではあるのですが、フロントエンドは見様見真似のお猿さんなので、クオリティへの期待は禁物です。 生暖かい目で眺めて下さい。 ついでに「よく、がんばったな。でも、こうしたらもっと良くなるぞ？ boy。」みたいなコメント貰えたら嬉しいです。 Chakra UI の使い方のベストプラクティスとか
Convert Figma Designs to Chakra UIGet production-ready code direct from Figma, and accelerate your development process
Chakra UIに関するTips・レシピ集です。基本無料公開ですが、おまけのみ有料とさせていただいています。値段・有料部位等は変更する可能性があることをご留意ください
I've been working on Chakra UI for the past five years, and I'm very proud of what we've achieved collectively. With our growing team, we've achieved over 1.9M downloads per month, 2M unique website visits per month, and over 31k Github stars; this has been one of my most rewarding projects to date. For a project that started with a single maintainer to become a multi-framework team, this has been
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.4 Node.js 16.6.1／npm 7.20.3 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.6 スタイルに一貫性を持たせる難しさ 前回、前々回は、Material-UIについて解説し
Reactでフォームを作成する際に使いやすいライブラリ「React Hook Form」を使ったフォームを、最近流行りの「Chakra UI」を使って作成したいと思います。 DEMO React Hook Form 使いやすさに重点を置いた、React用の高性能なフォームバリデーションライブラリ。 同様のライブラリ「Formik」や「Redux-Form」に比べ、コンポーネントの再レンダリングが少なく、パフォーマンスに優れた作りとなっています。 Chakra UI 2021/01/05現在、スター数13.9kと、急成長中のReact UIコンポーネントライブラリ。 あらかじめ多くのデザインパーツが揃っているので、すぐにReactアプリに導入が可能です。 WAI-ARIA準拠の設計で、アクセシビリティにも配慮されています。 下記のように必要なコンポーネントを呼び出して使います。 import
Chakra UIでカスタムコンポーネントを作ろうとした時、いくつかやり方があることがわかってきた。 1. 別コンポーネントとして普通にラッパーを作る 一番驚きの少ない方法 const RoundedOutlineButton: FC<ButtonProps> = (props) => { return <Button variant="outline" borderStyle="solid" borderWidth="2px" rounded="full" px={10} py={5} letterSpacing="0.1em" {...props} /> }
GitHub - chakra-ui/ark: A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
背景 さまざまなCSS フレームワークが登場し、最近は Tailwind CSSが注目され話題になっていたのは認識していました。そんな中、一部でChakra UIなるものの名前も見るようになり、さらにTailwind CSSと比較される書き方をされることが多いように感じ気になっていました。 また、React Developer Roadmap2021の Stylingにあり、使ってみたいと思っていたのもあります。 参考： https://roadmap.sh/react 私はReact を使用する場面が業務でも個人開発でも多いのですが、個人的にReact UserはChakra UI推しが多いように感じたのも使ってみようと思った理由の一つです。 https://www.reddit.com/r/nextjs/comments/jznkit/tailwindcss_vs_chakra_ui_
はじめに こんにちは、開発事業部ソフトウェアエンジニアの柳澤です。 今年の春からキカガクにジョインしました。 前職ではWebエンジニアとしてプレーンな CSS を書いていましたが、キカガクではスタイリングのために Chakra UI（ReactのUIコンポーネントフレームワーク）を採用しています。 プレーン CSS ユーザーが、 Chakra UI を使う上で躓いたポイントがいくつかあったので、今回小技集としてまとめました。同じ境遇の方の助けになりますと幸いです。 Chakra UI を学ぶ際に、下記の本が大変参考になりました。 zenn.dev 今回はこちらを読んだ上で、特に難しかった項目をピックアップして書いていきたいと思います。 疑似要素・疑似クラス同士を組み合わせる まず最初に、疑似要素・疑似クラスを組み合わせる書き方です。 Chakra UI では &:hover は _hove
対象読者 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
GitHub - chakra-ui/chakra-ui: ⚡️ Simple, Modular & Accessible UI Components for your React Applications
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - premieroctet/openchakra: ⚡️ Full-featured visual editor and code generator for React using Chakra UI
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS
Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS
どーも、入田 / ぐるたか @guru_taka です！ 本記事では React/Next.js (TypeScript) における Chakra UI の基本的な使い方を紹介します。レスポンシブ対応や独自 CSS の記述方法など便利な Tips もまとめていますので、ぜひ参考にしてみてください！
How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
Hello. I'm Takuya Matsuyama from Osaka, Japan, an indie developer making a Markdown note-taking app called Inkdrop. In this video, I share how I built my portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js. I hope you enjoy it! ▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_conte
はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay15の記事です！ 昨日は「話題のノーコードツールを使ってみた」でした。 話題のノーコードツールを使ってみた 今回は、Chakra UIについてご紹介いたします。 Chakra UIとは、UIコンポーネントフレームワークの一つです。Reactのライブラリなので、エンジニアの方にとっては馴染み深い名前かもしれません。 スピード重視で0からデザインを作成する必要がある時に役立つと思います！一緒に学んでいきましょう！ Chakra UIの概要 Chakra UIは、コンポーネントの一貫性を保つ原理に基づいて作られたものであり、シンプルで実際に起こるUIデザインの問題に貢献する構成可能なコンポーネントを目指すものです。 "Chakra UI is established on principles that ke
Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。 そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。 OpenChakraの使い方 左側にあるパーツをドラッグ&ドロップしてデザインします。 プロパティを使って細かな調整も行えます。 作成したデザインはCodeSandboxで試せます。 OpenChakraを使えばChakra UIにあるUIコンポーネントを閲覧しつつ、デザインを進められます。コンポーネントも多数あるので、それが一覧になっていると分かりやすいでしょう。OpenChakraを使えばプログラマーであってもデザインがさくさく進められそうです。 OpenChakraは
Chakra UI Pro
What can you expect?A bundle of 180+ ready-to-use, responsive and accessible components with clever structured sourcecode files. 180+ Components Chakra UI Pro has 180+ components with source code to help you develop your project faster.
GitHub - chakra-ui/zag: Finite state machines for building accessible design systems and UI components.
Finite state machines for accessible JavaScript components Write once, use everywhere 🦄: The component interactions are modelled in a framework agnostic way. We provide adapters for JS frameworks like React, Solid, or Vue. Focus on accessibility ♿️: Zag is built with accessibility in mind. We handle many details related to keyboard interactions, focus management, aria roles and attributes. Headle
概要 公式ドキュメントは現在準備中の模様ですが、"use client" なしで Chakra Ui Components が Next.js のServer Components 上で動くようになったことについて解説します。 Chakra UI って何？ Chakra UI は UI component library の1つです。「Create accessible React apps with speed」 と謳っていて、爆速でデザイン・機能を構築できます。 また React, Typescriptと相性が良く、Next.js フレームワークを組み合わせた web アプリの開発体験がよく、多くのプロダクトで上記スタックが採用され使われているように感じます。 Next.js AppRouter との相性が悪かった しかし Next.13 以降で導入された App router では
このページではReact Hook Form(RHF)とChakra UIでフォームを作成していた際に、RHF側とChakra UI側のバリデーションが両方効いてしまったので、自分がどうやって解決したのかを記しておきます。 該当コード <> <Heading as="h1" mt={1 / 10} fontSize="3xl"> CONTACT </Heading> <form onSubmit={handleSubmit(onSubmit)} style={{ paddingTop: "15%" }}> <Flex justify="center" textAlign="center"> <Box w="lg" p={4} borderRadius="md" shadow="md" bg="gray.50"> <Stack spacing={4}> <FormControl id="na
GitHub - chakra-ui/awesome-chakra-ui: A collection of Chakra UI-related awesomeness
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
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Chakra UI を導入する方法を紹介します。また、設定しておくと便利な Tips も触れていますので、ぜひ参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.1 next: 11.1.2 @chakra-ui/react: 1.6.7 @emotion/react: 11 @emotion/styled: 11 framer-motion: 4 Chakra UI とは？
GitHub - yukukotani/eslint-plugin-chakra-ui: ESLint plugin for Chakra UI
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
# プロジェクトを作成する $ yarn create react-app --template typescript chakraui-tryout $ code !$ # プロジェクト内 $ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion $ yarn start Chakra UI とは何か? React (DOM) 用の UI コンポーネントフレームワーク Material-UI みたいなスタイルの強制が行われるフレームワークではない ある程度自分でスタイルを定義したい人向け。汎用性が高い。 Tailwind CSS + emotion みたいな感じ 要するに、短いコードでたくさんのスタイルを定義できます (Tailwind) Tailwind CSS と違い、面倒なセットアップ無しでスタ
グローバルなスタイルとは、アプリケーション全体を通して設定する共通のスタイルのことです。 例えば文字の色や背景色などです。 CSSフレームワークであるChakra-uiを使うと、すごく簡単にグローバルスタイルが設定できます。 /* Theme.tsx */ import { extendTheme } from "@chakra-ui/react"; export const theme = extendTheme({ styles: { global: { body: { backgroundColor: "gray.100", color: "gray.800" } } } }); chakra-uiには、extendThemeというものがあり、 その中で styles->global->bodyと階層を作り、最終的にbodyの中でグローバルなスタイルに適用したいCSSを記入します。
Chakra UI Vue | Chakra UI Vue | Simple, Modular and Accessible UI Components for your Vue Applications.
Build Accessible Vue apps with Speed ⚡️ Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed.
Chakra UI Figma Kit | Figma
The official Chakra UI Figma Kit ⚡️. Get access to simple, modular and accessible components you need to design and build your applications. What's Included Extensive styles for typography, color and effectsComponent variants including size and state, now also with interactionsDynamic layers po...
Chakra UI + React Hook Form
Chakra UI + React Hook FormThis example shows how to build a simple form with Chakra UI's form components and the React Hook Form form library:
GitHub - chakra-ui/panda: 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why you should use Chakra UI in React
Chakra UI - Figma Plugin
Chakra UIの歩き方 & Tips集
The future of Chakra UI
ReactのUIコンポーネントライブラリ「Chakra UI」とは？ カスタマイズ性と生産性を両立しよう【前編】
React Hook Form × Chakra UIで作るEFOを考慮したフォーム
Chakra UIの再利用コンポーネント拡張の方法あれこれ
TailwindCSS と比べつつ Chakra UI に入門する - Qiita
Chakra UI 小技集 - キカガク プラットフォームブログ
カスタマイズ性と生産性を両立する、React向けのUIライブラリ「Chakra UI」の魅力的な部品【中編】
【React/Next.js】Chakra UI の基本的な使い方【TypeScript 対応】 | fwywd（フュード）powered by キカガク
デザイナー目線のChakra UI - bagelee（ベーグリー）
OpenChakra - Chakra UI用のビジュアルエディタ
【朗報】Chakra UI が Next.js の App Router で使えるようになってた！！
React Hook Form x Chakra UI 二重バリデーションで困った話
Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法 | fwywd（フュード）powered by キカガク
Chakra UI を使ってみる (+create-react-app)
この本について｜Chakra UIの歩き方 & Tips集
Chakra-uiでグローバルなスタイルを設定する方法 - Qiita
news.yahoo.co.jp
txbiz.tv-tokyo.co.jp
sun369.hatenablog.com
comicborder.com
ichioshi.smt.docomo.ne.jp
note.com/k_g40xwikj