4 ms·

Show HN: React and Tailwind CSS UI Components

32 points by RedAmbi 3y ago

CodeSnaps is a React and Tailwind CSS UI component library with dark mode support. It helps developers to design faster and better with copy-and-paste code snippets without building their MVPs and apps from scratch.

nsonha 3y ago
if you already use a high level component model, why does it matter that it's implemented in Tailwind? What is the benefit of Tailwind anyway? You should think in terms of props and variants, not some alias indirection to css properties.
- solardev 3y ago
  Layout
  - nsonha 3y ago
    have components for layout? Use css grid which is much more flexible?
    - solardev 3y ago
      I mean, isn't that what this is? Components for layout? Personally I prefer MUI over Tailwind (there is layout overlap there, but MUI is much more than layout). But either one is much nicer to use than raw CSS when you are composing complex pages and dashboards. It's like you said, working with higher level components, just with layout also mostly finished out (but both frameworks let you adjust things in-situ like padding, margins, font sizes, colors and such in a clean and maintainable way)
- tauchunfall 3y ago
  I would also say it does not really matter that it's implemented in Tailwind. But they propose these components as "copy-and-paste code snippets" and of course it makes a difference when you copy and paste components with styles written in Tailwind, because you also have to setup Tailwind. >What is the benefit of Tailwind anyway? I'm prototyping design systems using Tailwind which saves me some minutes of work every day. It also uses just a CDN script that I directly load in the browser, no bundling required. I have an empty "tailwind.config.js" in the root directory in order to use the Tailwind language service.
- withinboredom 3y ago
  One of the biggest benefits to tailwind is in it's simplicity. Code shared doesn't need a framework (like Bootstrap or one of those), and is just a static stylesheet. Components using other frameworks tend to need at least two stylesheets -- the base framework and then a customizations one applied separately. They also generally need to be compiled with scss or something so that you can customize the colors. In essence, Tailwind just needs a single stylesheet and no pipeline. It also isn't just inline CSS, which has issues being bundled separately and dealing with media queries. There are a number of benefits, but Tailwind's verbosity is it's biggest downside. Unfourtanetly, if you just want a single style sheet, the verbosity is just a tradeoff you have to make.
  - withinboredom 3y ago
    If you're going to downvote an opinion, at least say why.
- quickthrower2 3y ago
  Once you are into tailwind for a bit, you sort of get it. They have kind of reduced the CSS landscape from very complex to a concise subset that does most of the stuff you want for a modern looking site. It gets to the point where the amount of stuff fits into working memory. It is convenient. Then if you copy-paste components from different places like for example this submission and others, they can play well together. You can go in an edit them and manipulate them in predictable ways. You can componentise them in say React if you wish. Imagine mixing up Bootstrap and Bulma - it would be quite hard to do. But if they are both based on Tailwind it is a lot easier. The components wont fight each other. The reality is none of the frameworks provide everything you need so you need to mix and match to get stuff done (or invent your own, which is OK too). Hope this makes sense. It is hard to explain because you have to do it to feel it.
bosky101 3y ago
Related alternative also based on react, tailwind and is open source => https://tremor.so https://tremor.so
- moritzwarhier 3y ago
  https://news.ycombinator.com/item?id=36244886 https://news.ycombinator.com/item?id=36244886 Tagline says it's focused on dashboards, but I guess these contain so many kinds of common components that it might be generally useful
greatpostman 3y ago
Component libraries are the new business model
- quickthrower2 3y ago
  Components are the new shovels
  - vortegne 3y ago
    Are they that new though? Component libraries were being sold in the 1990s for Delphi already.
JCharante 3y ago
Personally I found tailwind fast enough that I write all my CSS from scratch with it (e.g. no component libraries, other than one I make for myself). It seems like a pain to mix and match components from different libs.
T3RMINATED 3y ago
[dead]
loa_observer 3y ago
Just come here and share my real thoughts as a potential customer. Bought the tailwind components before, The reason that drives me to buy it is because they can really help me build landing page, and pricing page really fast. The components in code snaps is limited and not too much fancy and complete templates, which I can hardly find reason for purchasing.
hosseinyazdii 3y ago
The website looks super clean. Loved its design. Do you also offer pure CSS components?
- RedAmbi 3y ago
  thanks, unfortunately, it has only tailwind i plan to add vanilla css later

32 points by RedAmbi 3y ago

nsonha 3y ago

if you already use a high level component model, why does it matter that it's implemented in Tailwind? What is the benefit of Tailwind anyway? You should think in terms of props and variants, not some alias indirection to css properties.

solardev 3y ago
Layout
- nsonha 3y ago
  have components for layout? Use css grid which is much more flexible?
  - solardev 3y ago
    I mean, isn't that what this is? Components for layout? Personally I prefer MUI over Tailwind (there is layout overlap there, but MUI is much more than layout). But either one is much nicer to use than raw CSS when you are composing complex pages and dashboards. It's like you said, working with higher level components, just with layout also mostly finished out (but both frameworks let you adjust things in-situ like padding, margins, font sizes, colors and such in a clean and maintainable way)
tauchunfall 3y ago
I would also say it does not really matter that it's implemented in Tailwind. But they propose these components as "copy-and-paste code snippets" and of course it makes a difference when you copy and paste components with styles written in Tailwind, because you also have to setup Tailwind. >What is the benefit of Tailwind anyway? I'm prototyping design systems using Tailwind which saves me some minutes of work every day. It also uses just a CDN script that I directly load in the browser, no bundling required. I have an empty "tailwind.config.js" in the root directory in order to use the Tailwind language service.
withinboredom 3y ago
One of the biggest benefits to tailwind is in it's simplicity. Code shared doesn't need a framework (like Bootstrap or one of those), and is just a static stylesheet. Components using other frameworks tend to need at least two stylesheets -- the base framework and then a customizations one applied separately. They also generally need to be compiled with scss or something so that you can customize the colors. In essence, Tailwind just needs a single stylesheet and no pipeline. It also isn't just inline CSS, which has issues being bundled separately and dealing with media queries. There are a number of benefits, but Tailwind's verbosity is it's biggest downside. Unfourtanetly, if you just want a single style sheet, the verbosity is just a tradeoff you have to make.
- withinboredom 3y ago
  If you're going to downvote an opinion, at least say why.
quickthrower2 3y ago
Once you are into tailwind for a bit, you sort of get it. They have kind of reduced the CSS landscape from very complex to a concise subset that does most of the stuff you want for a modern looking site. It gets to the point where the amount of stuff fits into working memory. It is convenient. Then if you copy-paste components from different places like for example this submission and others, they can play well together. You can go in an edit them and manipulate them in predictable ways. You can componentise them in say React if you wish. Imagine mixing up Bootstrap and Bulma - it would be quite hard to do. But if they are both based on Tailwind it is a lot easier. The components wont fight each other. The reality is none of the frameworks provide everything you need so you need to mix and match to get stuff done (or invent your own, which is OK too). Hope this makes sense. It is hard to explain because you have to do it to feel it.

bosky101 3y ago

Related alternative also based on react, tailwind and is open source => https://tremor.so https://tremor.so

moritzwarhier 3y ago
https://news.ycombinator.com/item?id=36244886 https://news.ycombinator.com/item?id=36244886 Tagline says it's focused on dashboards, but I guess these contain so many kinds of common components that it might be generally useful

greatpostman 3y ago

Component libraries are the new business model

quickthrower2 3y ago
Components are the new shovels
- vortegne 3y ago
  Are they that new though? Component libraries were being sold in the 1990s for Delphi already.

JCharante 3y ago

Personally I found tailwind fast enough that I write all my CSS from scratch with it (e.g. no component libraries, other than one I make for myself). It seems like a pain to mix and match components from different libs.

T3RMINATED 3y ago

[dead]

loa_observer 3y ago

Just come here and share my real thoughts as a potential customer. Bought the tailwind components before, The reason that drives me to buy it is because they can really help me build landing page, and pricing page really fast. The components in code snaps is limited and not too much fancy and complete templates, which I can hardly find reason for purchasing.

hosseinyazdii 3y ago

The website looks super clean. Loved its design. Do you also offer pure CSS components?

RedAmbi 3y ago
thanks, unfortunately, it has only tailwind i plan to add vanilla css later