
Show HN: UI Playbook – A documented collection of UI components - raunofreiberg
https://uiplaybook.dev
======
apeescape
I 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.

~~~
iaml
I think author wouldn't have this problem if they wrote "Best practices for
common UI components" instead of "The documented collection of UI components"
as the header.

~~~
apeescape
Fair point

------
raunofreiberg
Hey!

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
What'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/)

~~~
d0liver
At 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
The 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.

------
ibdf
I 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
Care to elaborate which parts weren’t accessible for ya? Thanks.

~~~
ibdf
Install an accessibility tool such as the Wave browser extension and you can
see some of the issues... eg. missing form label and contrast.

------
sankalp221
Very 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!

------
mudiadamz
Not 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.

------
jagged-chisel
> yes, there's a search for 5 components

I mean, the 5th one isn't even available yet, just a teaser. :)

------
amelius
I don't get it, why isn't the "select" box opening, i.e. showing a dropdown?

~~~
hoonie12
The select at the top isn't actually a select input, if you scroll down to
examples it has an actual select box.

~~~
amelius
You're right. Hmmm, I don't think it's very good UI design to show a UI
element that turns out to be just an image or a button.

------
akoncius
nice, will bookmark it for later use when there will be more content :) thanks
for the effort!

------
rebelrexx858
What are the main differences between this and storybook?

~~~
lajr
This 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).

------
moneywoes
What UI components did you use to build the site.

------
d0liver
Nice! This is awesome!

------
brirec
Why no spinbox?

~~~
yboris
Had to look it up. I think these are more-commonly called "Number Input Box" ?

------
corytheboyd
Was 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
> 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
> 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.

