The documented collection of UI components
Start new thread
Chris Messina

UI Playbook - The documented collection of UI components

by
Raycast
•
UI Playbook is an effort to document common UI components, their functionality, best practices, accessibility requirements, and examples.

Add a comment

Replies

Best
Rauno Freiberg
Maker
Hey hunters! 👋 A big thank you to @chrismessina for the hunt! 🙏 I’m a software engineer from Estonia, currently building a design system at Veriff. While kick-starting my first design system, most of the time I would reference other design systems for inspiration and direction, only to find varying implementations of a single user interface pattern. There was no centralized specification as to how a certain component should be implemented or behave, which would have made my life a lot easier by being aware of various pitfalls and intricacies. UI Playbook is an attempt to spec common UI components based on my learnings regarding the aforementioned things. It is not meant to be “just another UI kit”, but rather a guideline or recipe book for folks wanting to implement certain components. Everything in UI Playbook is related to my personal experience and findings, and I may be missing certain aspects — so I invite you to improve this, and hopefully, the next person tasked with building a design system will find this somewhat useful! If you'd like to dig into the source code or make improvements, feel free to use GitHub to do so: https://github.com/raunofreiberg... ✌️
Martin Kikkas
This tool seems super useful for designers when considering different UI components and understanding their behavior. Love the simplicity of the interface and the microcopy ✌️
Rauno Freiberg
Maker
@martinkikkas I'm happy to hear that this proves itself to be useful to not only developers, but also designers! Thanks for the kind words! ✌️
Cesar Zeppini
Design systems nowadays are a must to build a scalable product, and to have such a reference is amazing! I wish I had that years ago already :D great job and keep going!
Rauno Freiberg
Maker
@cesarzeppini Absolutely! I'm hoping that this will help others down the same road. Thanks! ✌️
Mohd Shad Mirza
Loved it
Rauno Freiberg
Maker
@iamshadmirza Thank you!
Angie
This is great! It's hard to find a comprehensive resource like this for UI.
Rauno Freiberg
Maker
@angie_liti Thank you, Angie!
Taavid Mikomägi
Nice job, love it! I feel like products like this are the ones that make Product Hunt so special! How long have you worked on it?
Rauno Freiberg
Maker
@taavid_mikomagi2 Thanks! Building UI Playbook specifically took a month. Although, working on UI Playbook has been an on-going experience over the past years. A lot of my personal learnings and research has been put into this.
Abhishek Jain
Good start. Would like to see many other elements like slicers, selection option when going for multiple select etc.
Rauno Freiberg
Maker
@aj002 Totally! I do have a rough timeline for the upcoming components, but I'm open to additional suggestions or contributions via GitHub: https://github.com/raunofreiberg... Thanks! ✌️
AnanthaMurthy CS
Very competitive product
Rauno Freiberg
Maker
@ananthamurthy_cs Appreciate the feedback!
Karita Kärmet
What a great overview for both designers and developers! Will definitely use that as a guide when building new components from now on. Thanks for the documentation and I'll be keeping my eye on the updates 🙌 BTW, is there a way to follow along with the progress somehow?
Rauno Freiberg
Maker
@karita_karmet I'm glad to hear that! I do share all of the updates and new components added via my Twitter: https://twitter.com/raunofreiberg Alternatively, you can sign up for the newsletter on the website. It's at the bottom of the page. Thanks for the support! ✌️
Jason M Festa
This is interesting. What if you allowed others to upload their components?
Jason M Festa
Also... maybe it could have codepen area?
Rauno Freiberg
Maker
@jasonfesta1 I'm definitely open to others contributing their knowledge into UI Playbook. The repository is open-source at GitHub, so feel free to check that out at https://github.com/raunofreiberg... Thanks! ✌️
Rauno Freiberg
Maker
@jasonfesta1 Interesting idea! However, UI Playbook is mostly meant to be consumed as documentation. The low-level implementation details, API-s, and framework choices of components aren't that relevant. Thanks for your thoughts!
12
Next
Last