raunofreiberg/ui-playbook

The documented collection of UI components πŸ€“

TypeScript

1,433

143 commits

updated Jan 6, 2023

See the code

README

image

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 πŸ“–

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 πŸ–€ !

components
documentation
playbook
ui

raunofreiberg/ui-playbook

The documented collection of UI components πŸ€“

TypeScript

1,433

143 commits

updated Jan 6, 2023

See the code

README

image

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 πŸ“–

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 πŸ–€ !

components
documentation
playbook
ui

Significant stargazers

Wojciech Maj

3,571 followers Β· starred Jan 2023

Yangshun Tay

13,535 followers Β· starred Jul 2020

Matt Pocock

49,480 followers Β· starred Jul 2020

Matic Zavadlal

388 followers Β· starred Nov 2022