omarnagy91 / ui-playbook

The documented collection of UI components 🤓

UI Playbook

WIP

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

Motivation 🤔

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 document common UI components based on learnings regarding the aforementioned things. This may or may not prove itself to be helpful to others, and I might be missing certain aspects — so I invite you to improve this and hopefully the next person tasked with building a component library will find this somewhat useful! ✌️

Plays 📖

• Tooltip
• Button
• Select
• Notification
• TextField
• Avatar
• Checkbox
• Motion
• Popover

Contributing

Wish to submit a new component for UI Playbook? Read our contributing guide for some ideas on how to do so.

Support

I work on this project in my spare time, so if you'd like to show support, you can do so by buying me a coffee 🖤 !