12 ms·

Chakra UI – Modular and accessible UI components for React apps

184 points by jhabdas 6y ago

deleted 6y ago
[deleted]
jxi 6y ago
I gave this a shot recently and thought it was cool at first, but like many projects in this space, it isn't really built on solid foundations. This thing is basically taking a bunch of ideas from TailwindCSS (which is awesome), wrapping it in ReactJS and providing a few components on top of that. This was actually what I was looking for, but turns out this library is really buggy. For example, dark mode doesn't work well with GatsbyJS: https://github.com/chakra-ui/chakra-ui/issues/305 https://github.com/chakra-ui/chakra-ui/issues/305. I just went back to using TailwindCSS directly.
chris_engel 6y ago
The initial example immediately drove me away. Attributes for font size, -weight and the like? There was a reason we stopped using inline styles...
- xmorse 6y ago
  And what is the reason? So you can have a global css file difficult to maintain and update? So you can give a stupid class name to every single tag you use in your markup? So that every time you include third party css there is the risk of confilicts?
  - saagarjha 6y ago
    > And what is the reason? So you can use CSS the way it was designed? > So you can have a global css file difficult to maintain and update? You know you can have multiple CSS files, right? Plus the code is all in one place and you can refactor it. > So you can give a stupid class name to every single tag you use in your markup? No, you give it a good class name. If something is a button, you call it a button rather "grey-rectangle width-500 clickable" > So that every time you include third party css there is the risk of confilicts? That's why you name your classes so this doesn't happen?
    - jacobr 6y ago
      I am sure there are plenty of cases where this approach works just fine. I assure you that those of us who work on projects where this would not work are not simply bad at naming things and that’s the only reason we picked component based styles.
    - player2121 6y ago
      > So you can use CSS the way it was designed? css was designed to style HTML documents. It was never designed to build rich and scallable apps thus we have all these libraries which fixes a lot of underlining problems.
      - saagarjha 6y ago
        What problems do they fix? How do they deal with refactoring?
        cutemonster 6y ago
        Refactoring: I suppose one then just refactors js instead of css. And even simpler/safer? If using typescript to make the js and refactorings type safe
    - mmm_grayons 6y ago
      Using something the way it was designed isn't an inherent virtue nor a reason to do so. Nothing is designed perfectly. > "grey-rectangle width-500 clickable" Oof, this is starting to feel like working with a Microsoft product.
    - ggregoire 6y ago
      > And what is the reason? >> So you can use CSS the way it was designed? This is not a reason why people should not use inline style. Also, CSS was designed 23 years ago. A few things happened in web development since 2 decades. > No, you give it a good class name. If something is a button, you call it a button It just doesn't work when your app has 100 buttons. You can introduce a naming methodology like BEM but naming conventions are hard to enforce, annoying to follow, and there are always guys on your team who disagree with them (for bad and good reasons).
  - holoduke 6y ago
    nah. what about theming? you cannot do that with inline styles. I think external CSS files for layout is always better than inline. it's very hard to debug and fix UI issues. nowadays you fix stuff on the fly with your browser inspector. you copy the result and paste it in your CSS file. cannot be simpler than that
    - player2121 6y ago
      > nah. what about theming? you cannot do that with inline styles. Nobody is utilizing inline styles in that example. It _looks_ like inline styles but it not. It generates css class name behind the hood which you can override in multiple ways. Starting from the ThemeProvider or just like this: const Footer = styled.div` ${PrimaryButton} { color: red; } ` I strongly suggest to look at https://styled-system.com/ https://styled-system.com/ to better understand the mechanics.
- Vinnl 6y ago
  Note that you're not directly setting the size and the like. Instead, you're selecting items from a scale that should compose well together. They could advertise this better; I've read a post in the past that explained it well, but unfortunately I couldn't find it any more. https://styled-system.com https://styled-system.com might be a good place to start if you want to investigate why there might be more to it than you might assume at first. Edit: I think this was the one: https://jxnblk.com/blog/mathematical-web-typography/ https://jxnblk.com/blog/mathematical-web-typography/
- saagarjha 6y ago
  Yeah, it's the new "utility CSS" thing that is basically just inline style with a bit less boilerplate. It's quick to get started with, hence its popularity, but it's not really great after that.
  - ericwood 6y ago
    I'm not a huge fan of atomic CSS, but part of the idea behind it is it solves the "ever-inflating CSS bundle" as well as the "where do I put this CSS" problems, both of which are issues on large projects.
- ggregoire 6y ago
  > There was a reason we stopped using inline styles... A few things happened between the 2000's and today tho. Practices evolve along with tools and technologies. We started styling our React components with CSS years ago at my job and we have been keeping doing so until today. While it works (if everybody on your team agrees to follow the same methodology and conventions, which is hard to enforce), it provides 0 benefits for us. We just went this way because it has always been the way to go while developing web stuff with Java, PHP, Django and friends. Separating the style from the structure while composing presentational components (Text, Box, etc) in a page doesn't actually make much sense and CSS maintenance, class naming and conflicts prevention is a real burden. I've been following the "CSS-in-JS" solutions (which have been developed to solve these exact issues) during the last years and it seems like they could help us focusing on what actually matters.
tony 6y ago
Use it on a few websites (https://www.hskflashcards.com https://www.hskflashcards.com, https://parataxic.org https://parataxic.org). Like it. - TypeScript - WAI ARIA / a11y for accessibility - Passthrough styling props via Styled System: https://styled-system.com/ https://styled-system.com/ - Passthrough responsive conditional props: https://chakra-ui.com/responsive-styles https://chakra-ui.com/responsive-styles - Light / Dark: https://chakra-ui.com/color-mode https://chakra-ui.com/color-mode (but it doesn't work on Gatsby: https://github.com/chakra-ui/chakra-ui/issues/305 https://github.com/chakra-ui/chakra-ui/issues/305) - I eschew some of the helper components like <Flex>. You are fine just using plain old Box as the shorthand props in Flex component don't add much. You can just pass display="flex" into a Box. - Passing hover/active styling requires using PseudoBox (or a component deriving from it), so <Box> - or anything built on top of it - can't have hover colors directly. This means configuration for some components require additional wrappers - Active! https://github.com/chakra-ui/chakra-ui https://github.com/chakra-ui/chakra-ui - 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 https://www.patreon.com/segunadebayo https://www.patreon.com/segunadebayo
- founderling 6y ago
  What does it give you over simple server-side rendered templates?
  - rat9988 6y ago
    I have never found sever side rendered templates simplate on harder and more complex web apps. But that's me, maybe it just does not map with your mental model, or maybe I started php and django with the wrong foot. All I know is that for the moment I find react simpler to reason with. I looked a bit at angular and angular, and they also seemed simpler than SSR templates.
  - tony 6y ago
    Chakra UI is a widget toolkit, so it's not on the same level of comparison. React will use JSX and can use all the cool new JS stuff, e.g. module imports, template literals. With webpack there's automated code splitting. The toolchain is under very active development (from react, to webpack, to babel, to new dependencies I've never heard of - aside: a downside is the dependency graph in node can be crazy) If your site is simple enough, server site templates will do. For anything non-trivial, where there's a lot of reusability and its very async / API heavy, the benefits shift dramatically to including a frontend framework. Regarding server side templates, there's limitations to how far templates engines (e.g. django templates / jinja2) can take you. Extending templates works when done carefully, as does overriding blocks. Anything non-trivial becomes very hard to manage - there's no type safety, setting variables is burdensome. On parataxic, there's no server. It's all static files served from cloudfront via Gatsby (to get an idea of this: https://jamstack.org/ https://jamstack.org/)
dubcanada 6y ago
There is also https://vue.chakra-ui.com/ https://vue.chakra-ui.com/ a Vue version.
- McPepper 6y ago
  Thank you for noting it out! (a Vue developer)
xmorse 6y ago
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 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
RNCTX 6y ago
The people who publish this also have a drag and drop interface for assembling low level components into higher level bundles of components, too. Seems to be an all-around well designed system to me, I like it!
player2121 6y ago
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.
player2121 6y ago
question to the author, why did you switch from styled-components to emotion?
- xmorse 6y ago
  I am not the author but I can say one reason is emotion supports ssr without injecting styles imperatively
JMTQp8lwXL 6y ago
What is the threshold for UI component libraries describing themselves as "accessible"> 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?
- snide 6y ago
  I don't work on Chakra, I lead the team that builds Elastic's design library[0]. We take accessibility pretty seriously. In general this means: - We make sure tab order and keyboard control is a equal level citizen. - All our colors and palettes are backed by math, both for contrast and for color blind qualitative comparison. - We build using semantic HTML and try to to avoid abstracting things like input controls and labels with too much magic. - We test and build for screen reader support at the component level and then provide helpers for navigation. Usually, given the complexity, this means a decent mix of native html, aria, and hidden text to make things read correctly. We do have some automated axe testing, but in all honesty, axes only gets the surface level spec and might cover 30% of what you need. The rest is really hand touched, backed by pretty strict review. In general the bigger frameworks like ours are getting better at this stuff, but it's still fairly poorly considered in the industry overall. The specs are pretty verbose and poorly standardized against browsers. This make it very much like building a traditional visual frontend during the browser wars of the 2000s (I was there!). Third party audits are normally done on the products themselves (in our case Kibana), not the framework itself. This ends up being an indirect method of auditing the framework though. All our work is open source and documented. If you have any questions, please ask away. I love this stuff and web UI has been a 20-year passion for me. [0]: https://elastic.github.io/eui/#/ https://elastic.github.io/eui/#/
  - cheald 6y ago
    Can you elaborate on the tools you use to do color selection?
    - snide 6y ago
      Mostly it's a combination of tools. We write a lot of custom color functions (using Sass). You can check the src here[0]. A common one we'll use is makeHighContrastColor(), which given two colors will automatically make the first one a 4.5 AA accessible contrast by adding tint/shade. For palette generation, we do a lot of our work with tools like chroma.js[1] which can help with some colorblind math. [0]: https://github.com/elastic/eui/blob/master/src/global_styling/functions/_colors.scss#L64-L130 https://github.com/elastic/eui/blob/master/src/global_stylin... [1]: https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1 https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ff...
apineda 6y ago
I'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.
- wokwokwok 6y ago
  CSS frameworks only solve the display side of things. Behaviour is as important, and it’s not trivial to implement. You’re writing a button? Well, big dealing you don’t need a component library. Modals? Menus? Tool tips? Autocomplete? Sliders? Colour pickers? I think it’s fair to say tailwind is a totally distinct problem domain, and not really relevant with regard to component frameworks.
  - pdxandi 6y ago
    I totally agree with you. I will say though, Tailwind with React hooks and Zustand is my go to lately. Feels quite trivial and flexible to build the functionality you mentioned. I've been quite happy with the output. Chakra UI looks fantastic, however. I am just personally feeling Styled Component fatigue after a few years of using it. I like being able to create consistent presentation with just CSS classes and leveraging hooks for anything more complicated.
  - discordance 6y ago
    Been playing with HTMX (https://htmx.org/ https://htmx.org/) for the behavior side lately and that's been pretty good for simple things.
McPepper 6y ago
I really like this style of creating UI. This is awfully similar to Flutter's style of declarative UI and I do mean it in the most positive way.
modzu 6y ago
what advantage does this bring over something like material-ui?
- tiltrus 6y ago
  Also curious here...
- crubier 6y ago
  Material UI is a nightmare to customize, extend or integrate with third party react libraries. This on the other hand is fully customizable (through theming AND the css props) and use emotion, so it plays well with A LOT of libraries that use emotion too.
  - mikewhy 6y ago
    Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI has the exact same Box component, also using styled-system. They're both libraries of components, so just as much a "nightmare" to extend or integrate. Seems the biggest difference is this uses Emotion.
    - player2121 6y ago
      > Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI implements Material UI by default and this is the main reason why it's hard to customize. Too much to change. I guess this is one of the reasons why there are not that many custom themes available for this library.
      - shripadk 6y ago
        You don't need to use the Material UI provided theme. You can just use the Base components. Like InputBase [1] or ButtonBase [2] and build your own component out of it. If you spend sometime with Material UI you will realize that it is actually designed really well. [1]: https://material-ui.com/api/input-base/ https://material-ui.com/api/input-base/ [2]: https://material-ui.com/api/button-base/ https://material-ui.com/api/button-base/
catlifeonmars 6y ago
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.
- eis 6y ago
  In my Firefox on a Macbook the animations seem janky. The toast example does not work at all. When something like the drawer opens, the main content part of the page jumps and moves to the side a bit only to jump back when the drawer gets closed. On every page there's an empty light blue box at the top which just wastes space and makes me scroll. That being said, many of issues don't seem to be present in the Vue version linked in another comment. Though even there some animations are not smooth and for example the up/down arrows on the slider number input just don't work. And for something that's supposed to provide a unified UI the styles between React and Vue versions are totally different, even the font size and weight. That slider number input that I mentioned looks completely different: shapes, positions, colors etc. Too many issues for my taste. Unfortunately that seems par for the course with many frontend frameworks.
feross 6y ago
Really happy that Chakra UI is getting some attention here. I interviewed the creator, Segun Adebayo, on the JSParty podcast here: https://changelog.com/jsparty/125 https://changelog.com/jsparty/125 You couldn't meet a friendlier maintainer. The fact that he's only been programming full-time for 6-7 months makes Chakra UI even more impressive. I used it to build my recent side project, Virus Cafe (https://virus.cafe https://virus.cafe) (Show HN: https://news.ycombinator.com/item?id=23408144 https://news.ycombinator.com/item?id=23408144), and it's been an absolute joy to work with.
nickbauman 6y ago
Where's the datepicker?
girriPal 6y ago
New to React. What are other similar libraries are worth looking at?
phist_mcgee 6y ago
I have just launched a cheap fuel finder (for Australia) application using chakra. https://petrolbuddy.net.au https://petrolbuddy.net.au It's been such a joy to work with, and I have loved the abstractions so far, especially things like <Flex> and <Box>.
thomasfedb 6y ago
The component I always look for in these libraries is a date picker (and also a time picker). I've never found one that actually works well on desktop and mobile and can be used with a keyboard.
- httgp 6y ago
  Same, I use Chakra-UI in a production-grade app and I hit a wall with a date and time picker. I had to build my own with Downshift, but getting it to work correctly on all resolutions and with react-hook-forms was tedious and time-consuming.
- ramraj07 6y ago
  What is the best date picker you have ever used?
  - thomasfedb 6y ago
    So far the most consistent behaviour is two <select> tags for hours and minutes.
    - jhabdas 6y ago
      At that, sounds like Chakra is feature-complete with regard to time picking .
- santialbo 6y ago
  I have mixed feelings about more advanced components like datepickers because they always make quite opinionated choices: - do they use moment, date-fns, ? - do they favor an easier and rigid API or a more complex but customizable? - do they allow custom i18n? Most of the ones you find out there have English hardcoded in. All of these reasons usually make me go the route of building my own one.
  - chank 6y ago
    Honestly though. Every third party framework or component you use is going to have an opinion. Your only choice is if that opinion aligns with yours or not.
kamranahmed_se 6y ago
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'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 https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDua...
agustif 6y ago
I used to have ant.design as my react frontend first pick. Then I needed to do responsive, and it was much more fun doing this in chakra with it's variable sizes for different viewports, etc, which was much nicer than dabling with ant.design less/css @media queries in my experience. +1 for Chakra-UI
hnuser 6y ago
How is this different from all other UI libraries out there?
codebender828 6y ago
Hello fam! Creator of the Vue version of Chakra UI here! Chimed in a little late, but I'm grateful for the Chakra UI shoutout! 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! I've gained some useful insight while reading some of the comments made about the libraries. We'll definitely be looking into this in the near future! The Vue version was recently released a month ago! We're currently improving the release and coming up with new ideas to make developing accessible Vue apps with Chakra UI easier and more fun. If you have any questions about the Vue version (or React) as well, I'm happy to take them! We're also very glad to receive contributors to help us improve Chakra UI. If this sounds like something you're interested in doing, feel free to checkout the issues: Vue repo: https://github.com/chakra-ui/chakra-ui-vue/issues https://github.com/chakra-ui/chakra-ui-vue/issues React repo: https://github.com/chakra-ui/chakra-ui/issues https://github.com/chakra-ui/chakra-ui/issues

184 points by jhabdas 6y ago

deleted 6y ago

[deleted]

jxi 6y ago

I gave this a shot recently and thought it was cool at first, but like many projects in this space, it isn't really built on solid foundations. This thing is basically taking a bunch of ideas from TailwindCSS (which is awesome), wrapping it in ReactJS and providing a few components on top of that. This was actually what I was looking for, but turns out this library is really buggy. For example, dark mode doesn't work well with GatsbyJS: https://github.com/chakra-ui/chakra-ui/issues/305 https://github.com/chakra-ui/chakra-ui/issues/305. I just went back to using TailwindCSS directly.

chris_engel 6y ago

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

xmorse 6y ago
And what is the reason? So you can have a global css file difficult to maintain and update? So you can give a stupid class name to every single tag you use in your markup? So that every time you include third party css there is the risk of confilicts?
- saagarjha 6y ago
  > And what is the reason? So you can use CSS the way it was designed? > So you can have a global css file difficult to maintain and update? You know you can have multiple CSS files, right? Plus the code is all in one place and you can refactor it. > So you can give a stupid class name to every single tag you use in your markup? No, you give it a good class name. If something is a button, you call it a button rather "grey-rectangle width-500 clickable" > So that every time you include third party css there is the risk of confilicts? That's why you name your classes so this doesn't happen?
  - jacobr 6y ago
    I am sure there are plenty of cases where this approach works just fine. I assure you that those of us who work on projects where this would not work are not simply bad at naming things and that’s the only reason we picked component based styles.
  - player2121 6y ago
    > So you can use CSS the way it was designed? css was designed to style HTML documents. It was never designed to build rich and scallable apps thus we have all these libraries which fixes a lot of underlining problems.
    - saagarjha 6y ago
      What problems do they fix? How do they deal with refactoring?
      - cutemonster 6y ago
        Refactoring: I suppose one then just refactors js instead of css. And even simpler/safer? If using typescript to make the js and refactorings type safe
  - mmm_grayons 6y ago
    Using something the way it was designed isn't an inherent virtue nor a reason to do so. Nothing is designed perfectly. > "grey-rectangle width-500 clickable" Oof, this is starting to feel like working with a Microsoft product.
  - ggregoire 6y ago
    > And what is the reason? >> So you can use CSS the way it was designed? This is not a reason why people should not use inline style. Also, CSS was designed 23 years ago. A few things happened in web development since 2 decades. > No, you give it a good class name. If something is a button, you call it a button It just doesn't work when your app has 100 buttons. You can introduce a naming methodology like BEM but naming conventions are hard to enforce, annoying to follow, and there are always guys on your team who disagree with them (for bad and good reasons).
- holoduke 6y ago
  nah. what about theming? you cannot do that with inline styles. I think external CSS files for layout is always better than inline. it's very hard to debug and fix UI issues. nowadays you fix stuff on the fly with your browser inspector. you copy the result and paste it in your CSS file. cannot be simpler than that
  - player2121 6y ago
    > nah. what about theming? you cannot do that with inline styles. Nobody is utilizing inline styles in that example. It _looks_ like inline styles but it not. It generates css class name behind the hood which you can override in multiple ways. Starting from the ThemeProvider or just like this: const Footer = styled.div` ${PrimaryButton} { color: red; } ` I strongly suggest to look at https://styled-system.com/ https://styled-system.com/ to better understand the mechanics.
Vinnl 6y ago
Note that you're not directly setting the size and the like. Instead, you're selecting items from a scale that should compose well together. They could advertise this better; I've read a post in the past that explained it well, but unfortunately I couldn't find it any more. https://styled-system.com https://styled-system.com might be a good place to start if you want to investigate why there might be more to it than you might assume at first. Edit: I think this was the one: https://jxnblk.com/blog/mathematical-web-typography/ https://jxnblk.com/blog/mathematical-web-typography/
saagarjha 6y ago
Yeah, it's the new "utility CSS" thing that is basically just inline style with a bit less boilerplate. It's quick to get started with, hence its popularity, but it's not really great after that.
- ericwood 6y ago
  I'm not a huge fan of atomic CSS, but part of the idea behind it is it solves the "ever-inflating CSS bundle" as well as the "where do I put this CSS" problems, both of which are issues on large projects.
ggregoire 6y ago
> There was a reason we stopped using inline styles... A few things happened between the 2000's and today tho. Practices evolve along with tools and technologies. We started styling our React components with CSS years ago at my job and we have been keeping doing so until today. While it works (if everybody on your team agrees to follow the same methodology and conventions, which is hard to enforce), it provides 0 benefits for us. We just went this way because it has always been the way to go while developing web stuff with Java, PHP, Django and friends. Separating the style from the structure while composing presentational components (Text, Box, etc) in a page doesn't actually make much sense and CSS maintenance, class naming and conflicts prevention is a real burden. I've been following the "CSS-in-JS" solutions (which have been developed to solve these exact issues) during the last years and it seems like they could help us focusing on what actually matters.

tony 6y ago

Use it on a few websites (https://www.hskflashcards.com https://www.hskflashcards.com, https://parataxic.org https://parataxic.org). Like it. - TypeScript - WAI ARIA / a11y for accessibility - Passthrough styling props via Styled System: https://styled-system.com/ https://styled-system.com/ - Passthrough responsive conditional props: https://chakra-ui.com/responsive-styles https://chakra-ui.com/responsive-styles - Light / Dark: https://chakra-ui.com/color-mode https://chakra-ui.com/color-mode (but it doesn't work on Gatsby: https://github.com/chakra-ui/chakra-ui/issues/305 https://github.com/chakra-ui/chakra-ui/issues/305) - I eschew some of the helper components like <Flex>. You are fine just using plain old Box as the shorthand props in Flex component don't add much. You can just pass display="flex" into a Box. - Passing hover/active styling requires using PseudoBox (or a component deriving from it), so <Box> - or anything built on top of it - can't have hover colors directly. This means configuration for some components require additional wrappers - Active! https://github.com/chakra-ui/chakra-ui https://github.com/chakra-ui/chakra-ui - 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 https://www.patreon.com/segunadebayo https://www.patreon.com/segunadebayo

founderling 6y ago
What does it give you over simple server-side rendered templates?
- rat9988 6y ago
  I have never found sever side rendered templates simplate on harder and more complex web apps. But that's me, maybe it just does not map with your mental model, or maybe I started php and django with the wrong foot. All I know is that for the moment I find react simpler to reason with. I looked a bit at angular and angular, and they also seemed simpler than SSR templates.
- tony 6y ago
  Chakra UI is a widget toolkit, so it's not on the same level of comparison. React will use JSX and can use all the cool new JS stuff, e.g. module imports, template literals. With webpack there's automated code splitting. The toolchain is under very active development (from react, to webpack, to babel, to new dependencies I've never heard of - aside: a downside is the dependency graph in node can be crazy) If your site is simple enough, server site templates will do. For anything non-trivial, where there's a lot of reusability and its very async / API heavy, the benefits shift dramatically to including a frontend framework. Regarding server side templates, there's limitations to how far templates engines (e.g. django templates / jinja2) can take you. Extending templates works when done carefully, as does overriding blocks. Anything non-trivial becomes very hard to manage - there's no type safety, setting variables is burdensome. On parataxic, there's no server. It's all static files served from cloudfront via Gatsby (to get an idea of this: https://jamstack.org/ https://jamstack.org/)

dubcanada 6y ago

There is also https://vue.chakra-ui.com/ https://vue.chakra-ui.com/ a Vue version.

McPepper 6y ago
Thank you for noting it out! (a Vue developer)

xmorse 6y ago

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 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

RNCTX 6y ago

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

player2121 6y ago

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.

player2121 6y ago

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

xmorse 6y ago
I am not the author but I can say one reason is emotion supports ssr without injecting styles imperatively

JMTQp8lwXL 6y ago

What is the threshold for UI component libraries describing themselves as "accessible"> 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?

snide 6y ago
I don't work on Chakra, I lead the team that builds Elastic's design library[0]. We take accessibility pretty seriously. In general this means: - We make sure tab order and keyboard control is a equal level citizen. - All our colors and palettes are backed by math, both for contrast and for color blind qualitative comparison. - We build using semantic HTML and try to to avoid abstracting things like input controls and labels with too much magic. - We test and build for screen reader support at the component level and then provide helpers for navigation. Usually, given the complexity, this means a decent mix of native html, aria, and hidden text to make things read correctly. We do have some automated axe testing, but in all honesty, axes only gets the surface level spec and might cover 30% of what you need. The rest is really hand touched, backed by pretty strict review. In general the bigger frameworks like ours are getting better at this stuff, but it's still fairly poorly considered in the industry overall. The specs are pretty verbose and poorly standardized against browsers. This make it very much like building a traditional visual frontend during the browser wars of the 2000s (I was there!). Third party audits are normally done on the products themselves (in our case Kibana), not the framework itself. This ends up being an indirect method of auditing the framework though. All our work is open source and documented. If you have any questions, please ask away. I love this stuff and web UI has been a 20-year passion for me. [0]: https://elastic.github.io/eui/#/ https://elastic.github.io/eui/#/
- cheald 6y ago
  Can you elaborate on the tools you use to do color selection?
  - snide 6y ago
    Mostly it's a combination of tools. We write a lot of custom color functions (using Sass). You can check the src here[0]. A common one we'll use is makeHighContrastColor(), which given two colors will automatically make the first one a 4.5 AA accessible contrast by adding tint/shade. For palette generation, we do a lot of our work with tools like chroma.js[1] which can help with some colorblind math. [0]: https://github.com/elastic/eui/blob/master/src/global_styling/functions/_colors.scss#L64-L130 https://github.com/elastic/eui/blob/master/src/global_stylin... [1]: https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1 https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ff...

apineda 6y ago

I'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.

wokwokwok 6y ago
CSS frameworks only solve the display side of things. Behaviour is as important, and it’s not trivial to implement. You’re writing a button? Well, big dealing you don’t need a component library. Modals? Menus? Tool tips? Autocomplete? Sliders? Colour pickers? I think it’s fair to say tailwind is a totally distinct problem domain, and not really relevant with regard to component frameworks.
- pdxandi 6y ago
  I totally agree with you. I will say though, Tailwind with React hooks and Zustand is my go to lately. Feels quite trivial and flexible to build the functionality you mentioned. I've been quite happy with the output. Chakra UI looks fantastic, however. I am just personally feeling Styled Component fatigue after a few years of using it. I like being able to create consistent presentation with just CSS classes and leveraging hooks for anything more complicated.
- discordance 6y ago
  Been playing with HTMX (https://htmx.org/ https://htmx.org/) for the behavior side lately and that's been pretty good for simple things.

McPepper 6y ago

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

modzu 6y ago

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

tiltrus 6y ago
Also curious here...
crubier 6y ago
Material UI is a nightmare to customize, extend or integrate with third party react libraries. This on the other hand is fully customizable (through theming AND the css props) and use emotion, so it plays well with A LOT of libraries that use emotion too.
- mikewhy 6y ago
  Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI has the exact same Box component, also using styled-system. They're both libraries of components, so just as much a "nightmare" to extend or integrate. Seems the biggest difference is this uses Emotion.
  - player2121 6y ago
    > Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI implements Material UI by default and this is the main reason why it's hard to customize. Too much to change. I guess this is one of the reasons why there are not that many custom themes available for this library.
    - shripadk 6y ago
      You don't need to use the Material UI provided theme. You can just use the Base components. Like InputBase [1] or ButtonBase [2] and build your own component out of it. If you spend sometime with Material UI you will realize that it is actually designed really well. [1]: https://material-ui.com/api/input-base/ https://material-ui.com/api/input-base/ [2]: https://material-ui.com/api/button-base/ https://material-ui.com/api/button-base/

catlifeonmars 6y ago

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.

eis 6y ago
In my Firefox on a Macbook the animations seem janky. The toast example does not work at all. When something like the drawer opens, the main content part of the page jumps and moves to the side a bit only to jump back when the drawer gets closed. On every page there's an empty light blue box at the top which just wastes space and makes me scroll. That being said, many of issues don't seem to be present in the Vue version linked in another comment. Though even there some animations are not smooth and for example the up/down arrows on the slider number input just don't work. And for something that's supposed to provide a unified UI the styles between React and Vue versions are totally different, even the font size and weight. That slider number input that I mentioned looks completely different: shapes, positions, colors etc. Too many issues for my taste. Unfortunately that seems par for the course with many frontend frameworks.

feross 6y ago

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

nickbauman 6y ago

Where's the datepicker?

girriPal 6y ago

New to React. What are other similar libraries are worth looking at?

phist_mcgee 6y ago

I have just launched a cheap fuel finder (for Australia) application using chakra. https://petrolbuddy.net.au https://petrolbuddy.net.au It's been such a joy to work with, and I have loved the abstractions so far, especially things like <Flex> and <Box>.

thomasfedb 6y ago

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

httgp 6y ago
Same, I use Chakra-UI in a production-grade app and I hit a wall with a date and time picker. I had to build my own with Downshift, but getting it to work correctly on all resolutions and with react-hook-forms was tedious and time-consuming.
ramraj07 6y ago
What is the best date picker you have ever used?
- thomasfedb 6y ago
  So far the most consistent behaviour is two <select> tags for hours and minutes.
  - jhabdas 6y ago
    At that, sounds like Chakra is feature-complete with regard to time picking .
santialbo 6y ago
I have mixed feelings about more advanced components like datepickers because they always make quite opinionated choices: - do they use moment, date-fns, ? - do they favor an easier and rigid API or a more complex but customizable? - do they allow custom i18n? Most of the ones you find out there have English hardcoded in. All of these reasons usually make me go the route of building my own one.
- chank 6y ago
  Honestly though. Every third party framework or component you use is going to have an opinion. Your only choice is if that opinion aligns with yours or not.

kamranahmed_se 6y ago

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'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 https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDua...

agustif 6y ago

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

hnuser 6y ago

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

codebender828 6y ago

Hello fam! Creator of the Vue version of Chakra UI here! Chimed in a little late, but I'm grateful for the Chakra UI shoutout! 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! I've gained some useful insight while reading some of the comments made about the libraries. We'll definitely be looking into this in the near future! The Vue version was recently released a month ago! We're currently improving the release and coming up with new ideas to make developing accessible Vue apps with Chakra UI easier and more fun. If you have any questions about the Vue version (or React) as well, I'm happy to take them! We're also very glad to receive contributors to help us improve Chakra UI. If this sounds like something you're interested in doing, feel free to checkout the issues: Vue repo: https://github.com/chakra-ui/chakra-ui-vue/issues https://github.com/chakra-ui/chakra-ui-vue/issues React repo: https://github.com/chakra-ui/chakra-ui/issues https://github.com/chakra-ui/chakra-ui/issues