5 ms·

Show HN: Hacker UI – a React design system for developers

65 points by ricokahler 7y ago

ricokahler 7y ago
Copied from my reddit post: https://www.reddit.com/r/reactjs/comments/f3pb73/in_the_past_30_days_i_made_an_open_source_design/?ref=share&ref_source=link https://www.reddit.com/r/reactjs/comments/f3pb73/in_the_past... About a month ago from today, I started working on a design system for my own personal projects. I wanted to create my own design language because the rest of them just felt too complex, too outdated, or too branded (for example Bootstrap is too old, Material UI is too Google-y). I wanted a design system that wasn’t too complicated or special but just something that’s unbranded and aesthetically pleasing. Anyway 30 days from realizing that, I have a design system I’m ready to share! It’s called “Hacker UI” and I’m currently pitching it as “the hacker’s go-to design system” (similar to how Bootstrap was a go-to). Features: - 25+ components - 25+ codesandbox examples - New CSS-in-JS solution - Composable styles by default - Full Typescript support There’s still a lot to be done with this library (optimizations, SSR support, CI and testing, animations etc) but I’m still super excited to share. Please let me know what you think! [docs at hacker-ui.com](https://hacker-ui.com/ https://hacker-ui.com/) [github repo](https://github.com/ricokahler/hacker-ui https://github.com/ricokahler/hacker-ui)
- app4soft 7y ago
  > Please let me know what you think! HN != Reddit, and that is why Markdown markup for "lists" and "links" in your comment text is unusable here.
- rimunroe 7y ago
  Thanks for sharing it! I'm not an expert, but this could use some basic accessibility enhancement. Keyboard navigation doesn't seem to be well supported in your Simple Menu component. When I click to open the Simple Menu, I can't tab around inside the opened menu. When a modal is opened, I can still tab around the rest of the UI (focus should be trapped within it). I highly recommend reading through https://www.w3.org/TR/wai-aria-practices-1.1/ https://www.w3.org/TR/wai-aria-practices-1.1/. It's an incredibly useful document and is a good starting point.
  - ricokahler 7y ago
    I’ll definitely take a look. Thanks for sharing!
erling 7y ago
This is really cool. Nice work!
hactually 7y ago
Really nice, do you have any plans to support Vue?
- ricokahler 7y ago
  In the future I would be very open to the idea but for now I'm trying to keep the scope limited: https://github.com/ricokahler/hacker-ui/issues/8 https://github.com/ricokahler/hacker-ui/issues/8
jeffbarg 7y ago
Looks great! Reminded me a lot of BaseWeb (https://baseweb.design/ https://baseweb.design/) when I first looked at the components. But this looks a bit lighter-weight to use which makes it more accessible IMO.
deleted 7y ago
[deleted]
veeralpatel979 7y ago
Great work!
asplake 7y ago
Not the easiest of sites to navigate on mobile, one thing Bootstrap does pretty well. Plans there?
- ricokahler 7y ago
  definitely! mobile friendly docs are marked very important: https://github.com/ricokahler/hacker-ui/issues/6 https://github.com/ricokahler/hacker-ui/issues/6

65 points by ricokahler 7y ago

Copied from my reddit post: https://www.reddit.com/r/reactjs/comments/f3pb73/in_the_past_30_days_i_made_an_open_source_design/?ref=share&ref_source=link https://www.reddit.com/r/reactjs/comments/f3pb73/in_the_past... About a month ago from today, I started working on a design system for my own personal projects. I wanted to create my own design language because the rest of them just felt too complex, too outdated, or too branded (for example Bootstrap is too old, Material UI is too Google-y). I wanted a design system that wasn’t too complicated or special but just something that’s unbranded and aesthetically pleasing. Anyway 30 days from realizing that, I have a design system I’m ready to share! It’s called “Hacker UI” and I’m currently pitching it as “the hacker’s go-to design system” (similar to how Bootstrap was a go-to). Features: - 25+ components - 25+ codesandbox examples - New CSS-in-JS solution - Composable styles by default - Full Typescript support There’s still a lot to be done with this library (optimizations, SSR support, CI and testing, animations etc) but I’m still super excited to share. Please let me know what you think! [docs at hacker-ui.com](https://hacker-ui.com/ https://hacker-ui.com/) [github repo](https://github.com/ricokahler/hacker-ui https://github.com/ricokahler/hacker-ui)

app4soft 7y ago
> Please let me know what you think! HN != Reddit, and that is why Markdown markup for "lists" and "links" in your comment text is unusable here.
rimunroe 7y ago
Thanks for sharing it! I'm not an expert, but this could use some basic accessibility enhancement. Keyboard navigation doesn't seem to be well supported in your Simple Menu component. When I click to open the Simple Menu, I can't tab around inside the opened menu. When a modal is opened, I can still tab around the rest of the UI (focus should be trapped within it). I highly recommend reading through https://www.w3.org/TR/wai-aria-practices-1.1/ https://www.w3.org/TR/wai-aria-practices-1.1/. It's an incredibly useful document and is a good starting point.
- ricokahler 7y ago
  I’ll definitely take a look. Thanks for sharing!

erling 7y ago

This is really cool. Nice work!

hactually 7y ago

Really nice, do you have any plans to support Vue?

ricokahler 7y ago
In the future I would be very open to the idea but for now I'm trying to keep the scope limited: https://github.com/ricokahler/hacker-ui/issues/8 https://github.com/ricokahler/hacker-ui/issues/8

jeffbarg 7y ago

Looks great! Reminded me a lot of BaseWeb (https://baseweb.design/ https://baseweb.design/) when I first looked at the components. But this looks a bit lighter-weight to use which makes it more accessible IMO.

deleted 7y ago

[deleted]

veeralpatel979 7y ago

Great work!

asplake 7y ago

Not the easiest of sites to navigate on mobile, one thing Bootstrap does pretty well. Plans there?

ricokahler 7y ago
definitely! mobile friendly docs are marked very important: https://github.com/ricokahler/hacker-ui/issues/6 https://github.com/ricokahler/hacker-ui/issues/6