
Show HN: Smooth UI, a React UI Library for Humans - neoziro
https://github.com/smooth-code/smooth-ui
======
hguhghuff
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
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)

------
nws
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!

~~~
neoziro
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
Writing !important to something I extend is not what I'd expect, it feels like
a hack.

~~~
pluma
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
I did not dig into that, but I would expect some intuitive solution if they
mention developer experience.

------
v512
I hate X for human tagline

~~~
coleifer
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
I hate so much about pipenv despite it implementing some good ideas. Maybe I'm
not with it any more...

~~~
coleifer
This comment would be more relatable if you explained what you didn't like.

~~~
cup-of-tea
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.

------
tekkk
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.

~~~
neoziro
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
Radio buttons and checkboxes are complex to create? What? Am I missing
something here?

~~~
batteryhorse
They're easy to create with HTML, but complex to create with React. This makes
it easy again.

------
jaequery
How did this get to front page?

~~~
neoziro
[https://smooth-ui.smooth-code.com/](https://smooth-ui.smooth-code.com/)

------
microcolonel
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.

------
Zekio
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)

~~~
neoziro
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)

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

------
hguhghuff
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.

~~~
madeofpalk
If you can't understand what it's doing from the source code, maybe read the
documentation?

I'm not a huge fan of Styled Components, but it's a way to write properly
encapsulated styles for just that moment - You write 'regular CSS' that's
scoped to exactly that component, so it can't leak out and affect other parts
of your site.

~~~
hguhghuff
I read the source code because I was trying to see how a solved problem needed
so much code to implement.

~~~
madeofpalk
I don't think Scoped CSS is a "solved problem".

Well actually, I think CSS Modules solved it in the most "perfect" way, but
I'm willing to believe that others have problems I haven't experienced before
:)

