Catalyst – Tailwind CSS Application UI Kit | Hacker News Reader

Catalyst – Tailwind CSS Application UI Kit

tailwindui.com

222 pointsaccounter8or199 comments

What's with all the negativity here on HN, especially about the pricing?

The Tailwind team created one of the most used CSS frameworks ever and charge nothing for it. The framework needs a revenue stream to enable continued investment. Rails has basecamp. Bootstrap had twitter. React has meta. Tailwind has Tailwind UI.

I find it great value. It's a one-off cost comparable to hiring a designer or front-end developer for a day, and you get a bunch of usable components + future upgrades.

Usually HN isn't as negative about revenue streams for open-source developers.

I paid for the UI kit early last year and think it's good value. The amount of time its saved me has more than paid for itself, and it's just nice to have something that isn't a subscription model, or licensed per project.

The developers are very generous too. 4 years back when I was in college I reached out to them and asked for a student discount. They gave me free access to Tailwind UI ( under a restricted license).

I agree with you on the pricing. I'm a Tailwind UI customer and have found it more than worth the money.

That said, it is disappointing to see recent work all tied to React. I generally prefer Phoenix LiveView (or Rails + Hotwire, etc) over a React/Angular/Vue approach. By tying it to React, they destroy most the value this kit would have otherwise had to me.

They already earned my money, though. I still enthusiastically recommend Tailwind UI to people.

Yeah. I’m also not using React. Vue would be nice and so would Phoenix. I think they might add Vue support, as they do for headless-ui. Phoenix is less likely imo.

The paid nature makes it hard for the community to fill in that gap, which is a shame. I’d love to collaborate on a Phoenix version of Catalyst.

I think it's the surprisingly poor quality of Catalyst compared to their other products and also how limited it is considering the price.

> I think it's the surprisingly poor quality

It's also a friggen preview and uncompleted thing. They could have waited for the whole thing to be done and polished but everyone was barking at them "just release it I don't care if it's not done"

Judging by your previous comments, you're not even a customer of theirs and have very misguided views on the product and it's pricing.

I have a feeling you have a competing product and are just trying to drum up negativity about Tailwind.

edit:// yep, I just checked your history, you're the creator of that nue thingy that is trying to compete with next/astro/nuxt/tailwind/etc all at once.

This makes so much more sense now. Thanks for investigating

Obviously not the reason for my feedback on Catalyst

This is an extra thing on top of everything they made. I praise them for not adding any extra costs. It is never enough for some people. They have a one off price for so much stuff. Absolutely no brainer for a lot of people.

> This is an extra thing on top of everything they made. I praise them for not adding any extra costs.

Only if you're an all access customer. Otherwise it's $149.

I like the Tailwind folks but $149 for Catalyst in its current state is a bit steep.

It’s only a £30 surcharge for me and I don’t have all access.

> one of the most used CSS frameworks ever

Any evidence for this claim?

Tailwind and Hero Icons eclipsed Bootstrap and Font Awesome in NPM downloads a year or more ago.

I should mention that I did a study about 6 months ago for a government client, and successfully convinced them to migrate away from Bootstrap 4, Font Awesome, and an in-house patchwork of 10 years of different css styles, to Tailwind CSS and Hero Icons in their mission critical app.

It took many long brain dump sessions, and some help from the U.S. Digital Service and Tailwind themselves.

At the end of the day, Tailwind solved more problems for them than it created.

You wouldn’t think that moving from loading icons via css versus loading them via inline svg’s would make a huge difference; but I found that it can actually reduce a second or two of render time from a legacy and bloated code base.

Font Awesome and Bootstrap Icons can be inlined too?

No, that is where the efficiency in Hero Icons comes from.

The claim is "one of the most used CSS frameworks ever", not "a CSS framework that has more downloads on npm than bootstrap."

Most people using bootstrap wern't getting it through npm. It was a script tag importing off a cdn.

ReactStrap is npm though.

That was the last time I used bootstrap about 2-3 years ago before going all in on Hero Icons, Headless-UI, and css design tokens and utility classes (Tailwind)

I'm not sure what your point is.

My point was that a lot of use of bootstrap was through CDNs. Yes, there was plenty of npm downloads also. However comparing tailwind npm downloads vs bootstrap downloads is not a fair comparison of use.

They have different use cases and target audiences. A lot of people want to just chuck a button in a template and have it look in their internal tool that 3 people will see. They likely copied the dist/bootstrap.min.css file and never updated.

It's also likely all the users of server side frameworks like django or ruby on rails never setup npm in those projects, but certainly used bootstrap. It's less likely those projects would use tailwind because you need have a js buildstep for it unless you want to ship 10mb of css.

There's no denying tailwind is popular, but thinking npm is the only way people are getting css frameworks/libraries is flat wrong.

Reactstrap is only one library, there is react-bootstrap, and also many people don't use a specific library with Bootstrap.

Tailwind is neat but I think people get a little too rah-rah about it given the build complexity and integrating with existing codebases.

The download count may not reflect the adoption rate. It is largely affected by CI/CD.

74K stars on github is _some_ evidence.

https://github.com/tailwindlabs/tailwindcss

You can see it clearly by watching the trends in any of the NPM tracking sites, such as npmcharts[1].

[1]: https://npmcharts.com/compare/bulma,tailwindcss,bootstrap,ui...

I'd say I see more tailwind than bootstrap for newer sites, but that's anecdotal.

I used to use Bootstrap. Now the only frameworks I ship anymore are Bulma and Tailwind.

There's something I genuinely don't understand in discussions of price, which is that folks seem to want to ignore basic economics.

Something is either worth it to you or it's not. If it is worth it, and you want it, you may buy it. If it's not, then you don't buy it. The world keeps spinning.

The Tailwind folks seem to think this may be worth $150 to some people. Those people might buy it. If you think it's not worth that, it doesn't mean that those people are wrong, it means that you 1) don't understand the value or 2) the value just doesn't exist for you, and it's not for you.

Or maybe people do understand the economics of it, but there's something psychological that's more pressing: because one person doesn't find value, and sees another person that does find value, they must defend or justify their own value assessment and confront the opposition. I'm sure there's a name for this, but I don't know it off-hand.

Relevant to your point, this is a simple tool that takes the user through the evaluation of the financial value of their time.

I have used this on occasion to figure out where it makes the most sense for me to exchange money for services.

https://programs.clearerthinking.org/what_is_your_time_reall...

Awesome rec! This is the kind of thing I never knew I needed but where suddenly I ask myself where was it all this time. Thank you.

This is not a general discussion about price. This is about Catalyst and whether it has a good price/quality ratio. I don't think it has. How about you?

I think you're mistaking quality as a proxy for determining value to the purchaser. It might be low quality, and still absolutely worth $150 to folks who buy it.

Even if you can be 100% objective on quality, the only way to make any kind of sweeping price/quality assessment is to compare it to other things on the market. What do other things in this price range give you? What do similar quality products cost? This is where I see some valuable comparisons actually being made in this context.

> I don't think it has. How about you?

I just can't see how this adds to the discussion at all in light of the above. It reads like "this isn't worth $150 to me" and I just think, ok, it's not for you. /shrug

Haven't checked out Catalyst but I have used TailwindUI. The components are really good but if you are not using a JS framework, it's a lot of work to integrate. The regular JS version of TailwindUI uses Alpine which doesn't have a CSP compatible version so you will have to write the Javascript from scratch.

Partially due to these and frustrated by lack of component libraries in Rails, I built and recently released a UI kit for Rails - https://zestui.com

Built with Phlex, styled with Tailwind with custom built Stimulus controllers.

It's got

- 25 themes

- Dark Mode

- Form Builder

- Icons

- Built in Flash Toast

- The components are responsive or have specific mobile views

- All the JS needed (Stimulus controllers) is wired up automatically

Phlex is a game changer. It is simple, powerful, intuitive and performant. I will never ever write a component as a partial/ViewComponent again.

A short video (50 seconds) showing it off: https://youtu.be/OQmDZddLtR8

I am a rails dev who bought tailwind ui, and i agree. I have had similar frustrations while integrating. Will give this a shot.

Interesting. There's a similar library called PhlexUI, also in pre-release. https://phlexui.com/

Stimulus is used to sprinkle JS functionality, but why use it when Vue JS and Svelte are available? Those two are very powerful and also lightweight/minimal.

Precisely because it can be used to sprinkle JS functionality :)

Vue and Svelte are great but adopting them means that you are using Rails as just a backend. For the vast majority of apps, the Rails default stack works really well.

For most apps/sites something like Stimulus, htmlx, etc are good enough, also all JS frameworks comes with complexity, now you need a bundler, eslint, prettier, postcss, etc. I can appreciate the simplicity of relying purely on Rails ecosystem or at least very minimum JS that does not require a bundler.

This is neat!

It'd be nice if clicking the blurred background area on a Sheet closed the sheet like the x button does.

That is planned as an option.i.e the developer decides whether to offer that. Some don't like it because accidental clicks close the sheet/modal which can confuse non tech savvy users.

I think we are well past the curve on the diffusion of innovation chart on this feature. It’s expected behavior that if a modal is focused and the background is blurred that clicking on the background will close the modal (or initiate close).

You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.

Maybe and it will be the default. But since this is a UI kit, I will expose an option to turn it off if the developer prefers that in general or in a specific context.

> which doesn't have a CSP compatible version

What do you mean?

This comment has the details.

https://news.ycombinator.com/item?id=34366454

This is an unbelievably unfinished UI library. Especially with a price tag. A limited set of components with very little attention to detail. For example, the buttons lack the active state completely. Why would I pay €250 for something I can find easily for free?

I've paid the 250, you don't just get these, but also lots of others: landing, components, docs sites etc.

In 10 years time I've used a decent share of templates, but these I've enjoyed most by far and gotten the best user reactions from.

Exactly. It’s very inexpensive considering what a lot of us make and how much time it can save when prototyping. It’s paid for itself multiple times over for me.

It's so easy to use! Plug-n-play, CSS technical debt, "production-ready", easy to customise, a single button is ONLY 1932 bytes of information, lean! /s

I was _about_ to praise it for at least being tabbable, but the example of "Team members" does not work with keyboard-only navigation... great stuff.

Hmm? That one works just fine, the dropdowns are regular <select> and those are the only focusable pieces.

Now something you can definitely complain about is the dialog not submitting with Enter.

This is unfortunately the whole space around Tailwind and UI kits. Incomplete kits which look the same and are all priced highly. Just look at Catalyst, Shadcn and Radix UI. I don't know what's new in all of this.

These are used by "agencies".

I’m using parts of Shadcn on a real product making real money. It’s really just a combination of cva, radix, and tailwind that you can copy into your app and customize/extend.

Shadcn, radix, and tailwind are all FOSS so they are not “high-priced”.

Your analysis is shallow and unfounded.

It's a shame these are all focused on react. I'd appreciate a vanilla js option

There are unofficial ports, eg. shadcn for solid: https://www.solid-ui.com/

Shadcn seems more polished and complete than Catalyst, and it's free. Absolutely no reason to pay for Catalyst. btw: is the active state missing from Tailwind since Shadcd buttons are also missing them?

> btw: is the active state missing from Tailwind since Shadcd buttons are also missing them?

Nope. Tailwind has good support for styling the active state, in the way that you'd expect if you've used Tailwind: e.g., `bg-red-500 hover:bg-red-600 active:bg-red-700`.

https://tailwindcss.com/docs/hover-focus-and-other-states

I meant they all look very similar. Yes these are indeed free.

> These are used by "agencies"

Oh my word, the horror! What's wrong with agencies?

I don't think they were implying something is inherently wrong with agencies. My interpretation of their comment is that 'agencies' who sell assembling plug-and-play UI kits are not the same as 'agencies' who design and build bespoke products from scratch.

My understanding with Radix UI was that it’s a headless UI library. Looking at it again, it seems that has changed.

Is this recent?

You’re thinking of Radix Primitives which is the headless component kit the new Radix Ui is built on https://www.radix-ui.com/primitives

You are welcome to do it for free. The entire point of an UI library is to save time.. you can technically build anything you want for free if you don't value your time.

This UI library sped up my dev time at least two-fold. The components and sample landing pages provided are really great IMO (and judging by their sales, it's not just me who agrees).

>You are welcome to do it for free. The entire point of an UI library is to save time.. you can technically build anything you want for free if you don't value your time.

the comment seems more about how lousy the product it is, and sure I wouldn't want to spend my time making a lousy product, but if in my technical evaluation something sucks then there is generally a good chance that I can build something better.

So the comparison is between using money to buy something bad or using time to build something good and the phrasing would be something like:

You are welcome to use your time to build something that doesn't have all these problems.

Point being it's incomplete and so you spend money AND time.

It’s not incomplete though. It has all the components you need to fully build a full-featured functioning web application fast.

I’ve shipped products with this kit without having to change much code because it’s very well-made.

Don’t take it from me - take it from the tens of thousands of devs who also use it.

The commenter above didn’t even look deeply into the actual offering. Catalyst is just one tiny (new) subset of the large number of things offered by the entire package.

I paid the all access price a couple of years ago and it's been very worth it as I'm more of a backend dev. It's saved me a ton a time.

Complaints about TailwindCSS always remind me of this quote:

“It is difficult to get a man to understand something, when his salary depends on his not understanding it.” ― Upton Sinclair, I, Candidate for Governor

https://www.goodreads.com/quotes/21810-it-is-difficult-to-ge...

I feel the same about people praising Tailwind.

Tailwind (and similar, I tend to use https://unocss.dev/) is not good for your frontend architecture BUT they allow you to be so fast, that it negates the benefits.

For a job well done, I'd follow the principles of https://maintainablecss.com/ For throwaway code I need to cram out as fast as I can, Tailwind it is.

I understand agencies using Tailwind, or Bootstrap, their revenue depends on it.

> For a job well done

What's the definition of a job well done? In my eyes it's completing the project and getting it out the door to customers to use. If Tailwind makes that happen, then isn't it a job well done?

“It is difficult to get a junior dev to understand something, when his resume-building depends on his not understanding it.” ― gedy

that's a cheap way to dismiss every critic to something

Is tailwindui associated with tailwindCSS? If not, then the lack of completeness and quality of this UI kit says nothing about tailwindCSS.

Literally on the page:

> Built by experts — you can trust that all of the code is written following Tailwind CSS best practices, because it’s written by the same team who created and maintain the framework.

It's one of many templates that they sell: https://tailwindui.com/templates

Looks like it's bundled with everything else in their templates collection. I purchased all access a while ago, and have found it incredibly helpful.

It's definitely worth the one-off price tag, and the fact they include future updates (like Catalyst) is incredible.

The key differentiator as I understand it, is that they provide simple code for kick-starting your own React component library. You receive a Figma design, and you tweak the components.

But yeah, it is clearly not yet finished, the dark mode has a too low color ratio. Good thing is that this UI library comes bundled with the previously existing Tailwind UI.

I would not expect something labeled as “v0.1.0” as supposed to be finished.

Weird unproductive comment tbh.

To be honest, his comment is more productive than yours. The point is, they expect you to pay for it, no matter how you label it, and the price is hefty for what you get.

The price includes the rest of TailwindUI, not just the Catalyst Preview. Whether or not it's the correct value for money is of course up to you, but I've used it extensively.

I would expect something labeled as $149 as supposed to be finished.

Nothing about $149 says anything about it being finished or not.

Has early access come to js component libraries??

As an infrastructure engineer who spends all day in Go and Bash and AWS I gotta say I’m a huge fan of Tailwind. This looks worth buying too. People are blown away by my front end skills, baby I’m just letting Copilot and Tailwind whisper sweet anodyne nothings into my ear. Keep me as far away from design as you can; this helps!

Hah same here. Learned enough tailwind to be effective for my personal website. I’m writing a blog article about it. Gpt4 didn’t produce satisfactory layouts so I learned grid-cols and flex, which is useful for groking existing tailwind layouts.

ChatGPT is an expert at tailwind

This is one of the reasons make-real works so surprisingly well: https://github.com/tldraw/make-real

Do you use Tailwind with Go templates?

Not parent, but I do. Go, SSR, vanilla JS, TailwindUI, SQLite, Litestream got us to $20k MRR for a niche CRM product.

TailwindUI provides HTML-only code and includes useful comments about class transitions, so I was able to handle the mobile hamburger menu and some form submission stuff in a tiny JS file, rather than React or Vue (which they also provide code for).

How'd you get Tailwind working in Go? What combination of libraries?

I just use the Tailwind node package to watch for HTML class name changes in my Go templates, which recompiles the CSS served by the Go HTTP server.

how does the Node package handle Go {{ $foo }} in the templates?

It just ignores it and looks for HTML class names as far as I can tell. I think it's a "dumb regex search" type thing.

I bought tailwind UI more than a year ago. The lifetime/unlimited product or whatever it was.

It’s generally fine but feels incomplete. Many of the components don’t have any alpine or JS code documented even though the team has clearly built those aspects when building the previews and demos.

I’m not sure what the rationale was there but I hope they’ve fixed it here.

Cause that's not what it's for? It's like the opposite of headless components. It's all head and no component. That's what you're buying. I think that's pretty clear cause that is what Tailwind is. It's CSS, not a component library. That's what this thing is.

Tailwind UI includes JS for many components. https://tailwindui.com/documentation#vue-installing-dependen...

> If you'd rather write any necessary JS yourself or want to integrate with a framework other than React or Vue, we also provide every Tailwind UI component example as vanilla HTML that you can adapt yourself.

The js they use is mainly just showing how to hook headlessui up. Tailwind ui was never about buying fully fleshed ready to go react/etc components. They were building blocks you adapt. Guess a lot of people missed that and assume it’s copy paste. Catalyst will become that hopefully.

I bought Tailwind UI when it first came out, and have been thrilled. I view it as essentially I paid for a high quality template to build off of. You are still expected to know tailwind, or at least that's how I took it, I am not sure how its advertised now, but I am pretty sure its not advertised as a batteries included OOTB solution, but more as a starting point. From that perspective, I have been pleased.

Even though the discord said they refund with no issues I haven't asked for a refund but tailwind ui was not worth the money unless react is being used.

Such a massive disappointment there isn't any JS with the "vanilla" components.

I’ve been really happy with my tailwind ui purchase. I’m weaker on the design side so having a consistent and decent look and feel is great. Writing up a little bit of js to make them dance is no big deal, and I like that I don’t have to buy into another build process or toolchain for it.

Yes. I don’t want a refund. There’s enough value there. I just want them to add the alpine code to the copy paste code.

Yes, agreed. I used them earlier and the examples on the page use alpine, but the "copy code" doesn't have it. It's actually easier to just inspect/view source and take what they did from the examples than try to write your own.

I’ve gotten into the habit of using “Inspect Source” in my browser when copying and pasting, because it tends to have almost fully-built Alpine transitions embedded.

Kind of inconvenient and strange.

Right?

It’s weird that they don’t just provide the alpine code that they’ve already built.

You’ve done the work guys.

That’s my only complaint. It’s been good otherwise.

I paid for DivMagic extension which lets me select elements on a page and it generates tailwind styled html code. It was quite useful for the first month but will probably cancel soon.

Can probably do that with chatgpt-4v now

I am so confused.

Tailwind UI is a set of prebuilt components for building applications. And catalyst is built from those but is also a "template" which is also an "application UI Kit" which is what I thought Tailwind UI was....

Yeah the link posted here as if it’s the home page might be confusing people: this is one of many templates, which happens to be for people looking to publish their web application, as opposed to their other templates like blogs, marketing pages, SaaS pages, etc

If you click around the site, you can see that “components” are separate from (and comprise) the templates

Oh man, if this is more or less tailwind ui but already turned into thoughtful react components, I’m all in. Tailwind ui has been useful as a reference of a non-trivial implementation of tailwind css that you buy, which is great. Try to drop the examples into a real application and you’ll have a bad time, it just feels like something should exist already… and here it is! Hopefully, anyway, will definitely try it out!

Yea, before this, I had been creating my own components based on the examples provided. It will be nice to just have premade components, now I won't have to implement all the components myself.

Why does Tailwind not build framework agnostic UI components?

The best thing about Tailwind is everyone can use it.

Wish we could go back to the days of building for the web and not building for React.

> Why does Tailwind not build framework agnostic UI components?

For the same reasons that PrimeFaces has PrimeNg (Angular), PrimeReact, and PrimeVue.

Given the way all the different stuff works together, that's the way it has to be done.

I'm still amazed they're asking for $299 for this!

Prime is MIT licensed. "Here, clone our repo on GitHub and do whatever you want!". Professional support is paid.

It looks good, it works, and no, I don't work for them. But $299 for this Tailwind thing seems rather crazy in comparison.

There is also PrimeFlex, which lets you do stuff like:

<div class="shadow-3 m-3 surface-card text-center p-3 border-round-sm h-6rem w-9rem flex align-items-center justify-content-center font-semibold">shadow-3</div>

Which of course looks a lot like working with Tailwind.

> I'm still amazed they're asking for $299 for this!

That’s like the cost of 1 front end developer day, and you get so many useful components + future updates.

If you see it as a business expense it’s great value.

It's terrible value when compared to the other offerings in the market which come as complete JS components and are free.

Also tailwind UI doesn't come with figma designs, whereas all the other free ones do.

You're just paying a brand tax here.

Do the other offerings you're refering to use tailwind css?

In that case I'm also paying for continued development by the tailwind team, unlike the free offerings. I don't mind that free toolkits use tailwind, that's the beauty of the MIT license, but I do value paying something to the creators to ensure continued development. Especially if my business makes enough money from it.

I use PrimeVue, which offers it's components in Tailwind, Bootstrap, and their own CSS framework. They also offer all the components as figma files and provide actual documentation of each component unlike tailwinds 3 lines of comments for each component.

NB. I've paid for both tailwind UI and PrimeBlocks.

> I'm still amazed they're asking for $299 for this!

Because building things costs money

> Because building things costs money

I already addressed this in my post.

PrimeTek's web component libraries are MIT licensed. They seem to still be going strong after 15 years.

This, apparently, is quite doable.

It's doable if it's not your primary business, and you're willing to put in lots of hours for no compensation.

Others don't want to do that.

> Why does Tailwind not build framework agnostic UI components?

They do. As part of the original TailwindUI product you get UI component templates where you can choose between React, Vue or plain HTML (= framework agnostic!) versions of the source.

However the React version is essentially a big monolithic template, which is what they are trying to address with Catalyst, where those templates are being split up into components (+ other improvements).

Yes… but that isn’t possible in a meaningful way.

Many other UI frameworks such as kendo have tried this and failed, and gone back to variants for each UI framework.

Really, if you want meaningful integration with a ui library it has to natively support that library.

I mean certainly I would be delighted if they’d figured out a way to do this, but it’s unsurprising they didn’t: it’s just a very very difficult problem to solve, and the only really decent effort at it (web components) has had extremely limited support and enthusiasm from the community, and has some reasonably unsolvable technical limitations.

Someone needs to invent a way of doing that that works before you could reasonably expect people to start building frameworks with it.

Like say plain old web components?

May also want to see

https://daisyui.com/

A FOSS Tailwind component library

Also Skeleton if you’re using Svelte with Tailwind

https://www.skeleton.dev

From daisyUI home page:

> instead of writing 100 class names, use semantic class names

?!?

That defeats the whole purpose of Tailwind, which is not writing any semantic class name. I don't get it.

DaisyUI is the best IMO, as long as you are willing to customize the theming and the rounded-ness. Daisy's default themes don't look that great IMO.

Unfortunately, I'm going to have to dunk on the irony of developing a CSS-first toolkit then only releasing headless React components. At least if you used Svelte or WebComponents directly you could compile them down to bind to other frameworks.

I'm not a React hater, but it's time for React-only support for UI toolkits to end. There are other compelling frameworks that are also worth using that are better choices in many cases.

I’m disappointed they went with React as well. There are definitely more innovative frameworks (my favorites: Vue and Svelte). But I do understand the Tailwind team - it is an economic decision. React (still) dominates.

Going framework-agnostic is (currently) not a good approach imo. The developer experience would suffer too much. I hope in the future agnostic UI kits become a thing, but the tooling around this approach needs to change first.

Why would you ever pay for a UI kit on the web. I am not gonna name things, but you dont need to spend a dime on any framework. Most if not all popular ones are opensource. Use those ones. Makes your life much easier. Community arround them also a lot bigger.

The design kits that tailwind provides have been so useful compared to everything else. The difference in quality (that I've noticed) is significant when compared to free alternatives.

Tailwind full access is such an easy sell for me. Plus it's pay once, so I don't mind it at all.

There are better open source libraries available, such as Shadcn, which offers real components and Figma design, among many others.

https://ui.shadcn.com/

> Why would you ever pay for a UI kit on the web.

Once you've tried to implement one yourself, and looked at how much time and effort it is, you will understand

I paid for it because I love what Adam and team are doing with Tailwind. It's been incredibly beneficial to use as a backend engineer, and the amount of money paid is trivial to the benefits it provides.

The time I would spend just thinking about how to structure things is more expensive than paying the one time fee for tailwind ui.

I think it’s great value amd have already gotten a multiple out of it.

Also look at Flowbite as an alternative tailwind component library

You can also check out

https://preline.co/

Which is basically what Tailwind UI should be.

Works with anything.

Flowbite looks like what tailwind ui should have been.

Designers I have worked with want to use flowbite so their figma comps are accurate and i think tailwind ui not having figma assets is a huge drawback.

Yeah 100%. I've been looking for a UI library with figma templates and the choices are:

1. Flowbite

2. ...er Flowbite

I'm not a designer, I just want to be able to mock up a UI before I implement it. I guess it's not a priority for other companies so I'll buy Flowbite (in spite of the annoying YouTube thumbnails on their site).

Actually preline looks good...

We've had success using Flowbite :-)

We're using it with React and occasionally find the docs lacking (and go looking in the component source for the answers), but otherwise have been happy with it, fwiw :-)

DaisyUI free and complete

More competition in the UI components is good.

If you are new to the space, you may check Mantine components.

They are arguably better and more mature.

The reason Mantine is free is because the maintainer is not doing it for quick bucks.

> The reason Mantine is free is because the maintainer is not doing it for quick bucks.

Over time I've found that lack of monetization eventually leads to maintainers leaving the project. Paying money feels like a way to guarantee (to a degree) that the maintainer won't drop the project when their attention turns elsewhere.

We have both kinds of projects, the ones that are free so maintainers leave, and the ones that make money and the money warps incentives over time. Rather than free vs paid, I try these days to get a sense for the motivations of the creator, and whether those motivations feel sustainable for something durable. Sometimes they involve money, sometimes not.

In 'Live preview' I casually inspected the the first button, and it has 63 classes, wow

  <button class="relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:text-[--btn-icon] [&amp;>[data-slot=icon]]:sm:my-1 [&amp;>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay] dark:after:-inset-px dark:after:rounded-lg before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)] dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] cursor-default" type="button" data-headlessui-state="">Button<span class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden" aria-hidden="true"></span></button>

Is this called a single class in Tailwind: ”px-[calc(theme(spacing[3.5])-1px)]”?

Don't know about Tailwind, but in DOM API it is definitely a single class.

https://flowbite.com/ is free and supports Vue too :)

Hate that everything needs React these days. I’ll stick to using Tabler and HTMX.

HTMX is cool but there are so many things it cannot even begin to compete with. SPA’s are essential in some situations.

hey look everyone, someone that doesn’t need a job or to collaborate with anyone

You have a strange view of how web development works. They can collaborate with others just fine using those or any other tools.

I have a view of how the market for talent works

People that aim to be employed do not spend time on things employers are not asking for

That sounds like a surefire way to ensure you'll be a cog for your entire career. Focus on delivering results.

how does that work if you wont be hired without prior experience in a particular stack to begin with

for current employment I’ve only ever seen teams push for using the next shiny thing solely to get that experience and professional validation in the current role, to be competitive for consideration in the next roles

It's unfortunately accurate that a lot of roles and people in those roles are indeed purely bullet-point driven for their resumes. If you're entering a role at a mid-level or junior, you're likely stuck with their tech stack choices. At senior or higher, it's usually about delivering results and the tech stack is up to you.

I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.

The business risks surrounding unpopular choices are generally strong enough to overwhelm the technical arguments. So why should a lead choose htmx? IMO only if the project was trivial enough to bring on such whimsical risk.

The fact that a library which does nothing more than swap a DOM element after an XHR request has the entire React community forming a collective shield wall should illuminate why it’s a dead-end technology.

these are the kinds of things people say in interviews and then wonder if their rejection was an example of ageism in tech

> If you're entering a role at a mid-level or junior, you're likely stuck with their tech stack choices. At senior or higher, it's usually about delivering results and the tech stack is up to you.

> I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.

So then I assume you’ve always been a senior developer?

Also I think this probably depends on domains/culture/multitude of factors. There are a lot of places where senior is just “cog with a lot of experience” or “cog with a lot of tenure”.

I have no idea how to sell that

I can also build anybody’s application in any stack, but that doesnt get me in the door, doesnt get the recruiter to say anything, doesnt get any hiring manager intro call

What kind of clientele are you going to where you’re just like “I am computer man, from internet, I can build that for you” and they’re like “woooooowwwww you’re hired!”

That might be a realistic assessment but let’s not pretend the preponderance of react in the industry is a desirable state of affairs.

I really like Nextjs

Hey look everyone, someone who just does as they are told and has no original ideas to contribute.

Paid TailwindUI user here.

I understand Tailwind's decision to choose a framework, but it is not good for us, and I suspect will not age well.

I have a non React site, and including React for a button makes no sense.

All the new stuff they are developing are not worth my even looking at.

I feel they built themselves up while doing everything in Vanilla, then for a period the sponsored and promoted Alpine as being their style, then in Headless moved to React + Vue, and now have abandoned that.

They've forgotten how much of the world wants to use Tailwind but won't use React.

Am I missing something? It looks like this is incredibly unfinished.

You aren't missing anything except that Catalyst is included in the Tailwind UI lifetime license that many HN readers bought years ago so this is likely from an "insider" email campaign, rather than a marketing landing page for a standalone product. It's not meant for general consumption yet.

Yeah, I think the post link should have been their announcement post, which gives some more context: https://tailwindcss.com/blog/introducing-catalyst

From the linked docs:

> Catalyst v0.1.0 is a development preview with unstable dependencies.

So, yeah, it's still a work in progress.

Yes. You missed the part where it said v0.1.0

I've been a long time user of tailwind UI and bought the all in bundle two years ago. Especially with the education discount I was eligible back then (thank you to the creators for that!) the purchase was an absolute no-brainer for me.

However, with this specific template, I really don't get the economics. This appears to be the least finished template they have in their repository, yet it is the most expensive as a single purchase.

I would gladly pay this price as a monthly subscription, if only I could get a maintained CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components.

I don't want JavaScript, I don't want a "framework", I don't want an npm-installable-monster, I want something that produces CSS that I can use for business. Semantic UI was close, but it got abandoned, and the forks do not go in the right direction.

Also, I need information-dense design, not whitespace-dominated design. Some of us build complex apps that display a lot of information and need tightly packed UI.

This is not hypothetical: I really do need to replace Semantic UI with something that is maintained and will work better on mobile screens. At a quick glance, my code has several thousand places where Semantic UI tags are used. If somebody picked up Semantic UI, started maintaining it without turning it into a JavaScript framework, and offered a $249/month subscription, I'd pick it up.

Been using Shadcn this week, definitely like the component concept and this has arrived just in time.

I had to double take this, because I use a very different web framework also called Catalyst http://catalyst.perl.org/

Perl in all its glory and horror.

I wish it wasn't tied to React. I'm unsure if this can be used headless?

It's cool how it uses the same name as the technology used for porting UIKit applications to macOS, which I'm sure will make search engine usage very fun if it ever gains any traction.

I instantly purchased this. I really love Tailwind and the component/UI libraries they sell. I'm shocked that a CSS library/framework is so divisive. If you don't like it, don't use it!

I'm also surprised that someone ... selling something ... gets such negativity on Hacker News of all places. Again, if you don't like it or it doesn't have value to you, don't buy it!

Tailwind Templates are the new Wordpress themes.

I wish there was a "frameworkless" version. Just include the JS/CSS/Font(s) and paste the html and there you go.

You could probably create that by copying the CSS generated in your developer tools

The dark themed combo-boxes are broken in terms of the item visibility. Only the active/selected item is readable, the rest are using a font color matching the background of the item box.

Hey thanks for the heads up on this — fixed!

The decision to cough up for the lifetime payment pays off again.

the probable success of Catalyst will prove once again that people believe that an expensive product is automatically better than free ones.

Can I use it with just plain HTML? I would love the marketing site to look just like the application if at all possible.

I learned so much from using tailwind ui. Could be more extensive but it’s easily paid for itself

The name is a bit confusing. I thought it was related to Apple's Catalyst and UIKit

Cannot be unseen: radio buttons are not symmetrical (chrome 120 on ubuntu)

Nice start, but Flowbite has all the blocks an states described.

Flowbite also charges money for some blocks. Plus: they need "flowbite js" for the blocks to work. It's a plugin for tailwind. Nah

I feel like this doesn't belong on the front page, not really trying to be negative here but it's a quite sloppy UI kit for something I don't like (Tailwind, after extensive research & some usage).

What free alternatives exist other than ShadCN?

PrimeVue Flowbite

All better. All free. All with figma designs.

Thank you <3

I don’t see a dark mode/theme.

I can see it on the top right corner.

<3 tailwind

this is awesome btw :-)

Slightly off topic, but has anyone read the license[0]?

This point feels really odd to me:

> Creating an admin panel tool (like Laravel Nova or ActiveAdmin) that is made available either for sale or for free.

I mostly get the other restrictions. You can't buy the kit then repackage it and sell it. But why can't you make an admin panel?

[0] https://tailwindui.com/license

> In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI.

That part I guess explains that. Tailwind UI makes admin panel themes and components so that’s a direct competition.

I think you can make an admin panel for your own application backend or whatever. You just can’t sell a general purpose admin panel product. At least, that’s my reading of it.

Yeah, creating a postgres admin panel would probably fine.

Creating an admin panel for a blogging platform that gives the admin a WYSIWYG-like experience that leverages tailwind ui is probably too close to competition

It says "admin panel tool", which given the examples seems to me that the prohibition is not on creating a single purpose admin panel for a specific app.

Reply on news.ycombinator.com