Skip to content

Instantly share code, notes, and snippets.

@itsMapleLeaf
Last active July 12, 2021 16:29
Show Gist options
  • Save itsMapleLeaf/e8334a48ed8db6760d78e5aa7a197e97 to your computer and use it in GitHub Desktop.
Save itsMapleLeaf/e8334a48ed8db6760d78e5aa7a197e97 to your computer and use it in GitHub Desktop.
list of unstyled component libs

Headless is my current favorite. The API can be awkward in some places, but I think it still strikes a good balance between DX and flexibility. Hoping some more components will get added over time.

Reakit is really solid and feature-complete. However, it has an API that relies on spreading hooks into components. Beyond simple examples, it can get difficult figuring which specific set of props/options you need to override. Animations/transitions are a bit awkward as well.

Reach has a nice API, but it's not as flexible as other options. Plus, I've had issues where the required css files overwrite my own styles for it, making it harder to customize the styling. I'd prefer something that comes with zero styles. But it works well if you don't mind that.

Really comprehensive, really solid API. Transitions are kind of meh; it seems like you need to use full on CSS @keyframe animations for transitions to work properly, when I'd like to use a simpler css transition instead. But maybe that's changed, or maybe I did something wrong. It's also in early alpha as of writing this, so it's not my first recommendation, but I like what it's going for.

React Aria is in a different category from the others. It's not as much a collection of components, as it is a collection of helper hooks. Comparatively speaking, RA is very low-level; the code for a dialog modal is significantly more verbose than with the other options listed here. But it's good if you find yourself needing that level of flexibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment