https://github.com/raunofreiberg/ui-playbook

The documented collection of UI components 🤓
https://github.com/raunofreiberg/ui-playbook

components documentation playbook ui

Last synced: 6 days ago
JSON representation

The documented collection of UI components 🤓

• Host: GitHub
• URL: https://github.com/raunofreiberg/ui-playbook
• Owner: raunofreiberg
• License: mit
• Created: 2020-07-08T15:17:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T10:57:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-16T05:23:27.169Z (20 days ago)
• Topics: components, documentation, playbook, ui
• Language: TypeScript
• Homepage: https://uiplaybook.dev
• Size: 805 KB
• Stars: 1,378
• Watchers: 30
• Forks: 77
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - ui-playbook

README

        


![image](/public/static/github.png)

## 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](https://uiplaybook.dev/play/tooltip)

- [Button](https://uiplaybook.dev/play/button)

- [Select](https://uiplaybook.dev/play/select)

- [Notification](https://uiplaybook.dev/play/notification)

- [TextField](https://uiplaybook.dev/play/textfield)

- [Avatar](https://uiplaybook.dev/play/avatar)

- [Checkbox](https://uiplaybook.dev/play/checkbox)

- [Motion](https://uiplaybook.dev/play/motion)

- [Popover](https://uiplaybook.dev/play/popover)

## Contributing 

Wish to submit a new component for UI Playbook? Read our [contributing guide](./CONTRIBUTING.md) 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 🖤 !](https://www.buymeacoffee.com/rauno)