8 ms·

Show HN: Smooth UI, a React UI Library for Humans

87 points by neoziro 8y ago

nws 8y ago
Looks nice; very bootstrap-y. With all the component libraries out there today, it'd be nice to know what's different about this one? What does this library solve that others don't. Great work!
- chris_st 8y ago
  This is a really good point... particularly with React Semantic UI [1] and Material UI [2] having tons of existing components, as well as pretty nice developer experiences. [1] https://react.semantic-ui.com/introduction https://react.semantic-ui.com/introduction [2] https://material-ui.com https://material-ui.com
  - harunurhan 8y ago
    Agreed! Also I'd add ant-design [1] and grommet [2] (it is not very active although it works very well) [1] https://github.com/ant-design/ant-design https://github.com/ant-design/ant-design [2] https://github.com/grommet/grommet https://github.com/grommet/grommet
    - stevejay 8y ago
      FYI Grommet V2 has been in active development for a while and is now in beta. For styling, they’ve replaced SASS with styled components, which I think is a great move.
- leetbulb 8y ago
  It's really nice to see a UI component library that is built on SC. I have multiple applications using React Semantic UI and it can sometimes be a pain to extend / compose its component's styles using SC (typically when working with child elements). Usually if you want to work with SC and vendor UI systems / components, you'll be working with CSS/SASS/LESS/Etc for the vendor components and SC for your own components. With a library like this, most of your components are now all SC (which has other benefits aside from just uniform style composition) :) Edit: I think a big point that most non-frontend developers miss about these type of libraries is that they're designed to be extended, not necessarily used out of the box. Even if it looks identical to Bootstrap, the idea is to be able to have a nice base set of UI components that we can extend with SC -- the same way we'd extend our own internal components with SC.
- neoziro 8y ago
  Smooth UI is not better than other libraries like Material UI or Ant UI but the focus is different. Smooth UI put the focus on developer experience, extending a style is very simple. Also it exposes some classes, you don't have to learn any API to extend components, you can simply inspect components and use the classes! An example of extend: https://codesandbox.io/s/7k8o4x7lj6 https://codesandbox.io/s/7k8o4x7lj6
  - kowdermeister 8y ago
    Writing !important to something I extend is not what I'd expect, it feels like a hack.
    - pluma 8y ago
      Looks like the example uses that because it would otherwise be overridden by the variant=primary (which seems to be the default) so explicitly overriding that variant would probably be more intuitive and not require the !important hack.
      - kowdermeister 8y ago
        I did not dig into that, but I would expect some intuitive solution if they mention developer experience.
tekkk 8y ago
So what is this, Bootstrap-remake? Sorry to sound so snarky but I myself have found it a lot easier to just make your own components and not depend on some random 3rd party library. Makes it a lot easier to customize and you might learn a thing or two. Sure it's not so easy to create them but once you learn how it pays off. Okay now that I browsed through a little bit of the API it's all right, you don't have to invent everything by yourself if you use this. But I'm still adamant that you'd be better off to maybe rather copy the components to your source than use it as a dependency. Also there's no TypeScript support? After a lot of reluctance I've recently come to appreciate how nice TS makes your life when you avoid most of the silly bugs. Yes, sounds funny for most of people who haven't used dynamic languages but well... live and learn I guess.
- bloomca 8y ago
  > I myself have found it a lot easier to just make your own components and not depend on some random 3rd party library This. Unless you make a very generic project (and if you use React for that, probably you are doing something wrong), you bump into limitations of any CSS-framework sooner or later (later is especially painful, since it is impossible to fix without ugly workarounds).
- neoziro 8y ago
  In fact, components like Radios and Checkboxes are very complex to create. So we use Smooth UI as a base, but it is intentionally very light (no big components). About TypeScript, I am sorry, I am not a TypeScript user. TypeScript support would be awesome but I need some help on this!
  - tzahola 8y ago
    Radio buttons and checkboxes are complex to create? What? Am I missing something here?
    - batteryhorse 8y ago
      They're easy to create with HTML, but complex to create with React. This makes it easy again.
Zekio 8y ago
Anyone else experience odd Textarea resize behavior in the docs for this ? https://smooth-ui.smooth-code.com/#textarea https://smooth-ui.smooth-code.com/#textarea
- systoll 8y ago
  That's what happens when you transition width/height.
- neoziro 8y ago
  Transition all is evil, thanks for spotting the bug. https://github.com/smooth-code/smooth-ui/issues/8 https://github.com/smooth-code/smooth-ui/issues/8
v512 8y ago
I hate X for human tagline
- bloomca 8y ago
  Blazing fast framework for Humans in Y!
  - sleepychu 8y ago
    High frequency calculation for Humans!
- coleifer 8y ago
  I brought this up on a prominent package recently. You can see the discussion: https://github.com/pypa/pipenv/issues/2228 https://github.com/pypa/pipenv/issues/2228
  - cup-of-tea 8y ago
    I hate so much about pipenv despite it implementing some good ideas. Maybe I'm not with it any more...
    - coleifer 8y ago
      This comment would be more relatable if you explained what you didn't like.
      - cup-of-tea 8y ago
        Verbose, colourful output by default. Emoji in output (entirely unnecessary). It's essentially a GUI tool, not a CLI tool. The kind of tool that says "look at me! Look how much I'm doing! Aren't I amazing?". Good CLI tools just do their job. Oh and it's also unbearably slow.
hguhghuff 8y ago
So is the key point here a terse syntax for using actual CSS syntax (as opposed to react CSS) to create component wrappers? It’s not really clear what this is. Lack of a giant obvious demo link really annoys me with this sort of thing - “hey look at the code and all these words about our new visual offering”.
- neoziro 8y ago
  The real game changer in Smooth UI is the way to extend components. This is a CodeSandbox example, feel free to play with it! https://codesandbox.io/s/7k8o4x7lj6 https://codesandbox.io/s/7k8o4x7lj6
jaequery 8y ago
How did this get to front page?
- neoziro 8y ago
  https://smooth-ui.smooth-code.com/ https://smooth-ui.smooth-code.com/
hguhghuff 8y ago
I just read (skimmed) through the source code of https://www.styled-components.com https://www.styled-components.com Holy shit there’s a lot of code there. What is it all doing - can anyone summarize? As far as I can tell it’s main selling point is letting you use pure native CSS in reactjs. You can do that anyway in ordinary reactjs by writing: <style>’put your css here’</style> Put that straight into your react code and you can use any native CSS in ReactJS.
- neoziro 8y ago
  Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!
  - hguhghuff 8y ago
    Why is this better than a style tag? What’s the purpose/benefit of generating classes from CSS versus just using CSS? Couldn’t I just inject a CSS string into a component and put that string into a style tag?
    - neoziro 8y ago
      I will not explain all advantages of CSS in JS. You can find a lot of articles on the subject. An example https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc https://hackernoon.com/all-you-need-to-know-about-css-in-js-...
      - hguhghuff 8y ago
        The core premise for CSS in JS is solved by backticked strings in style tags as shown above. The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs. Here’s what the article you linked to says: “Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!” All addressed by backticked strings in style tags.
nixpulvis 8y ago
The first example is of a button with poor padding, I'd fix that ASAP to impress potential users.
microcolonel 8y ago
I really don't like it when "switch" toggles don't let you slide while holding down. if you want a toggle and don't want to implement sliding, just use a checkbox. Sliding toggles have a sliding affordance, and when it's not there, it screws with me. The buttons don't have an :active state either, seemingly, but that could just be limitation of their demo stylesheet.

87 points by neoziro 8y ago

nws 8y ago

Looks nice; very bootstrap-y. With all the component libraries out there today, it'd be nice to know what's different about this one? What does this library solve that others don't. Great work!

chris_st 8y ago
This is a really good point... particularly with React Semantic UI [1] and Material UI [2] having tons of existing components, as well as pretty nice developer experiences. [1] https://react.semantic-ui.com/introduction https://react.semantic-ui.com/introduction [2] https://material-ui.com https://material-ui.com
- harunurhan 8y ago
  Agreed! Also I'd add ant-design [1] and grommet [2] (it is not very active although it works very well) [1] https://github.com/ant-design/ant-design https://github.com/ant-design/ant-design [2] https://github.com/grommet/grommet https://github.com/grommet/grommet
  - stevejay 8y ago
    FYI Grommet V2 has been in active development for a while and is now in beta. For styling, they’ve replaced SASS with styled components, which I think is a great move.
leetbulb 8y ago
It's really nice to see a UI component library that is built on SC. I have multiple applications using React Semantic UI and it can sometimes be a pain to extend / compose its component's styles using SC (typically when working with child elements). Usually if you want to work with SC and vendor UI systems / components, you'll be working with CSS/SASS/LESS/Etc for the vendor components and SC for your own components. With a library like this, most of your components are now all SC (which has other benefits aside from just uniform style composition) :) Edit: I think a big point that most non-frontend developers miss about these type of libraries is that they're designed to be extended, not necessarily used out of the box. Even if it looks identical to Bootstrap, the idea is to be able to have a nice base set of UI components that we can extend with SC -- the same way we'd extend our own internal components with SC.
neoziro 8y ago
Smooth UI is not better than other libraries like Material UI or Ant UI but the focus is different. Smooth UI put the focus on developer experience, extending a style is very simple. Also it exposes some classes, you don't have to learn any API to extend components, you can simply inspect components and use the classes! An example of extend: https://codesandbox.io/s/7k8o4x7lj6 https://codesandbox.io/s/7k8o4x7lj6
- kowdermeister 8y ago
  Writing !important to something I extend is not what I'd expect, it feels like a hack.
  - pluma 8y ago
    Looks like the example uses that because it would otherwise be overridden by the variant=primary (which seems to be the default) so explicitly overriding that variant would probably be more intuitive and not require the !important hack.
    - kowdermeister 8y ago
      I did not dig into that, but I would expect some intuitive solution if they mention developer experience.

tekkk 8y ago

So what is this, Bootstrap-remake? Sorry to sound so snarky but I myself have found it a lot easier to just make your own components and not depend on some random 3rd party library. Makes it a lot easier to customize and you might learn a thing or two. Sure it's not so easy to create them but once you learn how it pays off. Okay now that I browsed through a little bit of the API it's all right, you don't have to invent everything by yourself if you use this. But I'm still adamant that you'd be better off to maybe rather copy the components to your source than use it as a dependency. Also there's no TypeScript support? After a lot of reluctance I've recently come to appreciate how nice TS makes your life when you avoid most of the silly bugs. Yes, sounds funny for most of people who haven't used dynamic languages but well... live and learn I guess.

bloomca 8y ago
> I myself have found it a lot easier to just make your own components and not depend on some random 3rd party library This. Unless you make a very generic project (and if you use React for that, probably you are doing something wrong), you bump into limitations of any CSS-framework sooner or later (later is especially painful, since it is impossible to fix without ugly workarounds).
neoziro 8y ago
In fact, components like Radios and Checkboxes are very complex to create. So we use Smooth UI as a base, but it is intentionally very light (no big components). About TypeScript, I am sorry, I am not a TypeScript user. TypeScript support would be awesome but I need some help on this!
- tzahola 8y ago
  Radio buttons and checkboxes are complex to create? What? Am I missing something here?
  - batteryhorse 8y ago
    They're easy to create with HTML, but complex to create with React. This makes it easy again.

Zekio 8y ago

Anyone else experience odd Textarea resize behavior in the docs for this ? https://smooth-ui.smooth-code.com/#textarea https://smooth-ui.smooth-code.com/#textarea

systoll 8y ago
That's what happens when you transition width/height.
neoziro 8y ago
Transition all is evil, thanks for spotting the bug. https://github.com/smooth-code/smooth-ui/issues/8 https://github.com/smooth-code/smooth-ui/issues/8

v512 8y ago

I hate X for human tagline

bloomca 8y ago
Blazing fast framework for Humans in Y!
- sleepychu 8y ago
  High frequency calculation for Humans!
coleifer 8y ago
I brought this up on a prominent package recently. You can see the discussion: https://github.com/pypa/pipenv/issues/2228 https://github.com/pypa/pipenv/issues/2228
- cup-of-tea 8y ago
  I hate so much about pipenv despite it implementing some good ideas. Maybe I'm not with it any more...
  - coleifer 8y ago
    This comment would be more relatable if you explained what you didn't like.
    - cup-of-tea 8y ago
      Verbose, colourful output by default. Emoji in output (entirely unnecessary). It's essentially a GUI tool, not a CLI tool. The kind of tool that says "look at me! Look how much I'm doing! Aren't I amazing?". Good CLI tools just do their job. Oh and it's also unbearably slow.

hguhghuff 8y ago

So is the key point here a terse syntax for using actual CSS syntax (as opposed to react CSS) to create component wrappers? It’s not really clear what this is. Lack of a giant obvious demo link really annoys me with this sort of thing - “hey look at the code and all these words about our new visual offering”.

neoziro 8y ago
The real game changer in Smooth UI is the way to extend components. This is a CodeSandbox example, feel free to play with it! https://codesandbox.io/s/7k8o4x7lj6 https://codesandbox.io/s/7k8o4x7lj6

jaequery 8y ago

How did this get to front page?

neoziro 8y ago
https://smooth-ui.smooth-code.com/ https://smooth-ui.smooth-code.com/

hguhghuff 8y ago

I just read (skimmed) through the source code of https://www.styled-components.com https://www.styled-components.com Holy shit there’s a lot of code there. What is it all doing - can anyone summarize? As far as I can tell it’s main selling point is letting you use pure native CSS in reactjs. You can do that anyway in ordinary reactjs by writing: <style>’put your css here’</style> Put that straight into your react code and you can use any native CSS in ReactJS.

neoziro 8y ago
Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!
- hguhghuff 8y ago
  Why is this better than a style tag? What’s the purpose/benefit of generating classes from CSS versus just using CSS? Couldn’t I just inject a CSS string into a component and put that string into a style tag?
  - neoziro 8y ago
    I will not explain all advantages of CSS in JS. You can find a lot of articles on the subject. An example https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc https://hackernoon.com/all-you-need-to-know-about-css-in-js-...
    - hguhghuff 8y ago
      The core premise for CSS in JS is solved by backticked strings in style tags as shown above. The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs. Here’s what the article you linked to says: “Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!” All addressed by backticked strings in style tags.

nixpulvis 8y ago

The first example is of a button with poor padding, I'd fix that ASAP to impress potential users.

microcolonel 8y ago

I really don't like it when "switch" toggles don't let you slide while holding down. if you want a toggle and don't want to implement sliding, just use a checkbox. Sliding toggles have a sliding affordance, and when it's not there, it screws with me. The buttons don't have an :active state either, seemingly, but that could just be limitation of their demo stylesheet.