Chakra UI – Modular and accessible UI components for React apps

Use it on a few websites (<a href="https:&#x2F;&#x2F;www.hskflashcards.com" rel="nofollow">https:&#x2F;&#x2F;www.hskflashcards.com</a>, <a href="https:&#x2F;&#x2F;parataxic.org" rel="nofollow">https:&#x2F;&#x2F;parataxic.org</a>). Like it.<p>- TypeScript<p>- WAI ARIA &#x2F; a11y for accessibility<p>- Passthrough styling props via Styled System: <a href="https:&#x2F;&#x2F;styled-system.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;styled-system.com&#x2F;</a><p>- Passthrough responsive conditional props: <a href="https:&#x2F;&#x2F;chakra-ui.com&#x2F;responsive-styles" rel="nofollow">https:&#x2F;&#x2F;chakra-ui.com&#x2F;responsive-styles</a><p>- Light &#x2F; Dark: <a href="https:&#x2F;&#x2F;chakra-ui.com&#x2F;color-mode" rel="nofollow">https:&#x2F;&#x2F;chakra-ui.com&#x2F;color-mode</a> (but it doesn&#x27;t work on Gatsby: <a href="https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui&#x2F;issues&#x2F;305" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui&#x2F;issues&#x2F;305</a>)<p>- I eschew some of the helper components like &lt;Flex&gt;. You are fine just using plain old Box as the shorthand props in Flex component don&#x27;t add much. You can just pass display=&quot;flex&quot; into a Box.<p>- Passing hover&#x2F;active styling requires using PseudoBox (or a component deriving from it), so &lt;Box&gt; - or anything built on top of it - can&#x27;t have hover colors directly. This means configuration for some components require additional wrappers<p>- Active! <a href="https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui</a><p>- Author is very courteous (if my limited interaction with him on the tracker is any indicator!) If you use Chakra and like it, you can support the creator via <a href="https:&#x2F;&#x2F;www.patreon.com&#x2F;segunadebayo" rel="nofollow">https:&#x2F;&#x2F;www.patreon.com&#x2F;segunadebayo</a>

I use this library for basically all my projects now, i have tried many component libraries but this is the one I am most productive with<p>The idea of using atomic css properties is similar to the tailwind philosophy but there is no need to purge the css and you get typescript completion and validation

I work with Segun (the creator of Chakra UI), super cool and down to earth dude. I love that Chakra UI is getting some attention. We have been using it in all our production applications and couldn&#x27;t be happier. I also just finished creating a short project-based video series on Chakra UI and React yesterday. Have a look if anyone is interested <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=NyG7YJWJd6s&amp;list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=NyG7YJWJd6s&amp;list=PLkZYeFmDua...</a>

I’m not sure exactly what’s going on, but I noticed in iOS Safari (iPhone 11, iOS 13.5.1), the components get progressively less responsive while browsing the components. After switching to a few component menus, for example, the button presses take ~1s to start animating. Reloading the page appears to reset the responsiveness to normal.

Really happy that Chakra UI is getting some attention here.<p>I interviewed the creator, Segun Adebayo, on the JSParty podcast here: <a href="https:&#x2F;&#x2F;changelog.com&#x2F;jsparty&#x2F;125" rel="nofollow">https:&#x2F;&#x2F;changelog.com&#x2F;jsparty&#x2F;125</a> You couldn&#x27;t meet a friendlier maintainer. The fact that he&#x27;s only been programming full-time for 6-7 months makes Chakra UI even more impressive.<p>I used it to build my recent side project, Virus Cafe (<a href="https:&#x2F;&#x2F;virus.cafe" rel="nofollow">https:&#x2F;&#x2F;virus.cafe</a>) (Show HN: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23408144" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23408144</a>), and it&#x27;s been an absolute joy to work with.

The component I always look for in these libraries is a date picker (and also a time picker). I&#x27;ve never found one that actually works well on desktop and mobile and can be used with a keyboard.

There is also <a href="https:&#x2F;&#x2F;vue.chakra-ui.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vue.chakra-ui.com&#x2F;</a> a Vue version.

What is the threshold for UI component libraries describing themselves as &quot;accessible&quot;&gt; Is it running through automated tools, such axe, is it an audit by an independent third-party group, or is it manual testing by actual users who regularly use screen reader tools?

I&#x27;d rather just use tailwind or other utility css. Why have another proprietary abstraction when you can have something concise that maps more directly to css. You can then build your own local abstractions as needed. Much leaner, universal and comprehensible imo.

Hello fam! Creator of the Vue version of Chakra UI here!<p>Chimed in a little late, but I&#x27;m grateful for the Chakra UI shoutout!<p>The React team is currently working on publishing new 1.0 Typescript release for Chakra UI. Lots of new goodies coming in next major version for React!<p>I&#x27;ve gained some useful insight while reading some of the comments made about the libraries. We&#x27;ll definitely be looking into this in the near future!<p>The Vue version was recently released a month ago! We&#x27;re currently improving the release and coming up with new ideas to make developing accessible Vue apps with Chakra UI easier and more fun.<p>If you have any questions about the Vue version (or React) as well, I&#x27;m happy to take them!<p>We&#x27;re also very glad to receive contributors to help us improve Chakra UI. If this sounds like something you&#x27;re interested in doing, feel free to checkout the issues:<p>Vue repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui-vue&#x2F;issues" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui-vue&#x2F;issues</a> React repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui&#x2F;issues" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chakra-ui&#x2F;chakra-ui&#x2F;issues</a>

I am a big fan of styled-system and glad that more frameworks are utilizing it. This is something that helps a lot when building desktop-alike apps for the web.

I really like this style of creating UI. This is awfully similar to Flutter&#x27;s style of declarative UI and I do mean it in the most positive way.

I have just launched a cheap fuel finder (for Australia) application using chakra.<p><a href="https:&#x2F;&#x2F;petrolbuddy.net.au" rel="nofollow">https:&#x2F;&#x2F;petrolbuddy.net.au</a><p>It&#x27;s been such a joy to work with, and I have loved the abstractions so far, especially things like &lt;Flex&gt; and &lt;Box&gt;.

Where&#x27;s the datepicker?

I used to have ant.design as my react frontend first pick.<p>Then I needed to do responsive, and it was much more fun doing this in chakra with it&#x27;s variable sizes for different viewports, etc, which was much nicer than dabling with ant.design less&#x2F;css @media queries in my experience.<p>+1 for Chakra-UI

The people who publish this also have a drag and drop interface for assembling low level components into higher level bundles of components, too.<p>Seems to be an all-around well designed system to me, I like it!

what advantage does this bring over something like material-ui?

The initial example immediately drove me away. Attributes for font size, -weight and the like? There was a reason we stopped using inline styles...

question to the author, why did you switch from styled-components to emotion?

How is this different from all other UI libraries out there?