5 ms·
Show HN: UI Playbook – A documented collection of UI components
- raunofreiberg 6y agoHey! After my first experience with design systems, I decided to kickstart a project called UI Playbook which is my attempt to document common UI components, their functionality, best practices, accessibility requirements, and examples. If at least one person finds this useful — it's a win!
- masonhensley 6y agoWhat's your general thought on adapting one of the bigger design systems with thousands of hours of improvement & polishing vs building one from scratch? I do think there is need for a common vernacular in these components, however I think that too often teams start from scratch when they could pull something off the shelf, and swap out some colors. List of corporate sponsored design systems: https://designsystemsrepo.com/design-systems/ https://designsystemsrepo.com/design-systems/
- corytheboyd 6y agoAgree with this comment. I think it is awesome that OP worked on a design system for the first time, that’s great experience to have, but it doesn’t warrant further diluting the market with another unfinished system.
- RunawayGalaxy 6y agoIt's not a design system. It's documentation/best practices around common UI components that you'd find in most design systems.
- corytheboyd 6y agoOh, then I guess I don’t see the point? Actual design systems vary quite a bit, refer to their documentation for their exact flavor of how to implement UI correctly and eliminate the middleman. I’m not saying having a general knowledge of the underlying tools is bad, that’s great knowledge to have, but it does already exist if you look for it.
- folz 6y agoIf I had to guess, the point is that OP enjoys learning about design systems and is trying to create a resource for other people to also learn from. Tons of knowledge already exists, but that doesn't stop people from trying to create or share new approaches to it anyway.
- d0liver 6y agoAt some point you’re fighting against the design system more than you’re using it. It’s The same reason that I wouldn’t build a web app on WordPress. WP is great if what you want is a WordPress site. Otherwise, you’re just trying to shoe horn _your app_ into WordPress. Most of these things aren’t difficult to build and can be picked up a la carte and customized to whatever extent.
- masonhensley 6y agoThe depth & flexibility in many of these libraries is quite extraordinary. Totally agree with the Wordpress example, however, I'd argue that more products & applications should attempt to be build upon known primitives to reduce cognitive overload for both the building team and the end users.
- miguelsm 6y agoThis reminds me of open-ui [1]. The goal of that project is also to tackle fragmentation and allow interoperability between component frameworks and design systems. How does UI Playbook compare to it? Do you think collaboration between the two projects would make sense? [1] https://open-ui.org https://open-ui.org
- rebelrexx858 6y agoWhat are the main differences between this and storybook?
- lajr 6y agoThis is a website detailing various UI components whereas storybook is a development tool where you can manipulate and view components you are building locally (although some people end up hosting a static version of their storybook somewhere).
- akoncius 6y agonice, will bookmark it for later use when there will be more content :) thanks for the effort!
- marcuskaufmann 6y ago"yes, there's a search for 5 components" Well then
- dang 6y agoPlease don't be a jerk in HN comments. Especially not in Show HN threads: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html.
- mudiadamz 6y agoNot as i expected but, great work, continue, maybe in the future it doesn't just a display of only 5 different things that i already know, and one of them isn't clickable.
- moneywoes 6y agoWhat UI components did you use to build the site.
- ibdf 6y agoI would recommend a couple of things: Sidebar with links to headers similar to other documentation sites. And if you are going to provide insights on accessibility, which is great, make sure your site is also accessible.
- raunofreiberg 6y agoCare to elaborate which parts weren’t accessible for ya? Thanks.
- ibdf 6y agoInstall an accessibility tool such as the Wave browser extension and you can see some of the issues... eg. missing form label and contrast.
- brirec 6y agoWhy no spinbox?
- yboris 6y agoHad to look it up. I think these are more-commonly called "Number Input Box" ?
- deleted 6y ago[deleted]
- d0liver 6y agoNice! This is awesome!
- corytheboyd 6y agoWas wondering why OP only seems to recommend reach-io as examples, turns out they are a contributor. It’s all open source so like, you’re not doing anything malicious for profit here, but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example system if this is supposed to be system agnostic documentation
- parhamn 6y ago> but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example No it wouldn’t. That’s a lot of disclaimer burden to put on someone.
- corytheboyd 6y ago> That’s a lot of disclaimer burden No it is not, a disclaimer is very low effort. Here is an example disclaimer: "Just a heads up, I am a Reach-UI contributor!" That is in no way a large burden, still gets the message out about both UI Playbook and Reach-UI, and is just the more respectable thing to do here. I really don't think OP did anything WRONG, there is clearly no malice here, it's just an observation I had to better communicate in the future for the people like me who care about these details, I know I am not alone here.
- raunofreiberg 6y agoThe documentation itself is system agnostic. You don’t need to use Reach UI for the docs to make sense. I recommend Reach UI because in my experience it has worked out great. Feel free to extend the examples with additional libraries! :-)
- amelius 6y agoI don't get it, why isn't the "select" box opening, i.e. showing a dropdown?
- apeescape 6y agoI feel like many commenters didn't bother to give 2 minutes to check out the site to get the gist of it. Sure, on first glance it does look like Yet Another design system or an alternative to Storybook, but in fact it's something else. This is sort of a wiki for common UI components, i.e., there's information on when to use them, how to implement them, common gotchas, and so on. Since using a 3rd party design system is not feasible for many businesses, I think this has the potential to be a great resource.
- sankalp221 6y agoVery cool resource! Thanks for creating it. Accessibility is a whole beast in itself. It'd be cool to give quick suggestions on how to make the components accessible. The W3 docs are good if you want to dive deep and understand the nuances, but a quick handy reference of good accessibility patterns for common components would go a long way. For example on buttons you could add something similar to this: https://a11y-101.com/development/aria-disabled https://a11y-101.com/development/aria-disabled. Overall, looks awesome!
- jagged-chisel 6y ago> yes, there's a search for 5 components I mean, the 5th one isn't even available yet, just a teaser. :)