Why is this advertised as HTML-first and framework-agnostic ? It directly leverages tailwind and UIKit libraries. That is NOT framework agnostic by any means.
When they say framework-agnostic they are talking about not being dependent on using React.
> Who is Franken UI for?
> Franken UI is tailored for small teams and solo developers seeking a beautiful, reliable CSS framework without the complexity of React, Vue, or Svelte. It's designed with an "HTML-first" approach, making it accessible to developers at any skill level.
That’s technically true, but anyone I know in the field would immediately understand what is meant by framework agnostic in this case. Unless we’re being pedantic for the sake of it, of course.
Yes. I immediately knew what it meant. GP is being needlessly literal. Language is a communication tool. I, as the audience, was communicated to as intended. I’m not sure what this pedantry does for anyone.
I didn't say it wasn't a framework because it compiles. I would expect framework to be a large shift in how you write or structure code. But there's no agreed definition.
Have to agree with most of the commenters here, framework-agnostic really means independent of any framework. This one is built on top of the CSS framework which adds a whole build step. So it was really better to go with a less misleading title like Tailwind CSS implementation of shadcn/UI
Indeed. One of the reasons my latest project at work did not adopt shadcn/ui is precisely not wanting to introduce the Tailwind dependency. Was hoping this could be an option.
This is definitely not HTML first, though. This is TS first, JS second, CSS third, and only then, HTML last. I'm all for clean frameworks, but this is very far removed from the idea of putting HTML first.
I'd really like a set of elements like this that is truly HTML + CSS. Vanilla. Layer on some _optional_ JS for some enhancements.
But this franken <form> element requires JavaScript to even render. Same for the tooltip, leader, cover, totop, ++ components; all of which can be done with HTML and CSS.
Fine, write your HTML is JS, but that isn't "HTML first".
edit: I stand corrected. the form will render without JS. The tab element in the docs wrapping the form doesn't render.
The form does not need JS. There are two labels black and red "Requires JS". The black one should've been "May Require JS". It is use for the "custom controls" provided by UIkit. But it is not required.
Cover, leader, dropdowns and even modals, you can always use the CSS class instead of UIkit custom attributes and toggle it manually via server.
Ah so the tab component doesn't render without JS. Because I can't see the form render in the docs. Which is in a tab.
Tabs can also be plain HTML + CSS. Even easier now with :has
The extreme version of HTML first: classless CSS libraries. IMO every web developer should be aware that these are sometimes a great option https://github.com/dbohdan/classless-css
I'ma huge fan of these. They often have a built in CSS "reset" and then nice base styling for all the HTML elements most folks typically use in a website. Overlay a tiny little bit of custom CSS to "make it your own", and you're off to the races!
Let me disagree. This is HTML-first because you can always grab the compiled CSS and optionally, compiled JS and reference it in your plain HTML file via <link rel="" href=""> and it will work just fine.
The TypeScript and Tailwind insanities are just there for easier development and my convenience. ;)
Maybe soon, someone will publish the compiled CSS. IDK
> This is HTML-first because you can always grab the compiled CSS and optionally, compiled JS and reference it in your plain HTML file via <link rel="" href=""> and it will work just fine.
But this is true for almost every web thing, and every web framework - you can just grab the final outputs and stick it into your web page.
So either your thing is "HTML-first", but so is everything else, or your thing is not "HTML-first", and some other things are.
> Maybe soon, someone will publish the compiled CSS.
So, until then, not only is this not HTML-first, it's not HTML at all.
To me (and maybe others), there's a difference between web development and Node/npm.
It doesn't seem HTML-first though. Also the Github description says it's a library of web components, this may be misleading because this project doesn't use Web Components.
I wasn't expecting it to use Web Components, I guess that's what happens when you give something a generic name. Similarly if some company named a code editor Code.
It's supposed to be named Visual Studio Code, VS Code for short, but I think Microsoft has started using just "Code" for things like the title of its Mac app bundle, which has gotten confusing/annoying.
I guess they mean Javascript framework agnostic. We use kotlin-js with Tailwind for our frontend. Actually works really nicely. So, this might be interesting for us.
Yeah I know it’s crotchety old man territory but I find CSS absolutely fine to work with these days, now that we have variables etc. Every time I’ve added PostCSS, Tailwind or whatever I’ve found my build times jump a ton and I don’t get a whole lot of use out of it.
Plain CSS and containerisation provided by Svelte (or the forthcoming scope stuff) is more than enough for me.
CSS is a dream these days. I understand why it’s intimidating for devs because it’s not meant for engineers it’s meant for designer so it has a wildly different set of assumptions and expectations.
But learning it is 100% worth it.
Tailwind is like an ORM. I get the appeal but if you know SQL /CSS it’s just going to get in the way.
I like the SQL/CSS analogy, with the full-stack spectrum being like:
SQL - Backend - Frontend - CSS
Most people just want to stay in the middle doing backend/frontend ("full-stack") work because it's just writing functions. Or because it's building the core of a feature, where things like database work and styling is pushed off or abstracted in libraries.
But on each end is where all the interesting stuff is really happening, and a full-stack dev who embraces both SQL and CSS is a lot more useful than a full-stack dev who stays in the middle.
For me it's not intimidating, it's just time consuming. I can create / iterate twice as fast when I'm styling inline with my HTML. It could be with tailwind, or other utility based libraries - tailwind has just done it the best from my experience.
In addition to intimidating—there is the rote repetitiveness: how many times do you want to style the same components? Or adding the same custom components.
Sometimes I just wanna work on my app and not write css.
This is ridiculous. Tailwind css is a utility "framework", which generates configured css classes to set 1-2 css attributes each.
The only reason it adds a build step is that it wants to tree-shake all unused classes to keep your bundle size as small as possible and let you configure which classes are available for generation.
Even the documentation makes it extremely clear which properties are set by which class (the default ones anyway).
As an actual example: how completely braindead do you have to be to not know which properties are set from looking at the official documentation? https://tailwindcss.com/docs/overscroll-behavior
Your comparison to an ORM would work for things like Bulma, bootstrap and pretty much all component libraries, including TailwindUI.
It's completely nonsensical for tailwindcss
You've either never actually looked into tailwind css and are purely talking out of your ass or are just repeating this opinion from someone that did such.
Disliking tailwind css is fine, and there are perfectly fine reasons to not use it. But your argument is just plain dumb.
You're completely right, and it's annoying to see this downvoted. Having read a lot of frontend discussions on HN, I would wager that half the people talking about how "complex" frontend is don't work in it. Tailwind and regular CSS are hardly distinct, it's just slightly different names.
It's very odd to see HN, supposedly a "self-thinker" crowd, continuously spout incorrect things because they heard someone else say it on here. Here are other things I've heard on HN repeatedly that aren't true (often in very upvoted comments).
- You can't make a static site with React
- React is only for SPAs.
- You can't use React without NextJS anymore.
- PHP is too slow for web development (maybe it is for your use case, but people seem to think it's bad for all use cases).
- PHP doesn't have strict type checking.
- NPM is somehow worse than every other packaging system (ignoring PIP, Maven, etc. NPM is surprisingly good at things that the rest of packaging systems don't get right).
Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other.
The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this:
<div className="bg-[#243c5a]" />
Either storing that color value in JavaScript, or creating a Tailwind theme for it in tailwind.config.js:
Something that could have been easily accomplished in native CSS:
:root {
--regal-blue: #243c5a;
}
div {
background-color: var(--regal-blue);
}
For most React websites, I use Tailwind by default almost always, and Tailwind UI is a great starting point for building a component library. But it still helps to support CSS for more advance styling use cases - even within Tailwind. Knowing CSS very well will make you better at Tailwind too even for common things like
<div className="w-[calc(100% - 1rem)]" />
It's kinda important to know both as separate technologies.
That's a very extreme example, and yes, I would just use the bracket syntax in Tailwind because I can see clearly that's not what I want for box-shadow.
If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.
It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.
> Tailwind makes box shadow easier
Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows.
That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid.
I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).
I meant that it's an extreme example of a tailwind utility doing a lot of settings for you. Versus, say, `italic`, which just does `font-style: italic;`. I can hardly compare that to an ORM where people can make full apps without learning SQL.
> if you want something else that's up to you
Right, just like CSS. It's a very light helper library that isn't dissimilar from CSS. That's my point.
We've been using visual generators since the introduction of the box-shadow css attribute.
Did you ever actually write them fully by hand?
I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me.
Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway
Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which).
Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL
Knowing the shorthand and actually writing it are different things.
If I get a visual spec from a designer, I'm not going to try out various numbers until it fits the image. I'll either ask them for the specific attribute if their tool allows for that or replicate it with a generator.
And if I'm fully in control myself, I'm going to use a generator too as I'll want it to look a specific way, which is easier to achieve with instantaneous feedback as you get it from a generator such as https://www.cssmatic.com/box-shadow
I can't imagine how you would know the shorthand without first knowing the longer form. CSS shorthand requires that you know the original form + the order of values in shorthand, and when values can be omitted along with special formatting as in:
font: normal normal 1em/1.6em sans-serif;
CSS shorthand is - I would say - more advanced than long form.
> I'm going to ask the designer what units to use
I would never get in the habit of letting a designer tell the front-end developers how to write CSS, mainly because they work in pixels, when the developer is often using viewport units, rem for sizing, em for fonts and icons relative to an initial size and current user zoom factor, and flex gaps and alignment for spacing. That level of collaboration and specification on spacing, sizes, etc. between the developer and designer (redlining) might be part of an initial design system discussion, but the resulting component library is probably translated into a style system that works well for the engineering team.
I think it's good you're using CSS generators, I learned most of CSS that way via Dreamweaver, and have copy/pasted from CSS Tricks countless times for edge case stuff - it's a great way to learn.
This is exactly what I was looking for. I love Stripe's UI and I was looking for a library of unified components that I can copy paste with my Rails app. Then I saw shadcn and was disappointed that it was only for React.
I'm mostly a backend developer and TailwindCSS really enabled me to be bold with working with frontend CSS. So far I've been copy pasting examples from Tailwind or Flowbite. But "franken" really looks much closer to what I was looking for, a cleaner opinionated unified interfaces that I can put together, works with Tailwind and can be used with Rails.
I was just looking at shadcn and thinking it's a shame it was react specific. Looking forward to seeing if this is viable to use in a server rendered site with htmx!
The demo at the very least appears to assume a lot about font sizes or shapes. It is very broken on my setup with everything escaping the bounds that it is presumably supposed to live in:
"HTML-first" -> Opens the docs and sees a bunch of javascript... Haha. Am I missing something? I was expecting to see `<section class="rounded white content">` or similar not `ui({ components: { countdown: {hooks: {}, media: false} } })`.
We just built a JS-frontend-framework-agnostic library because we have Vue, React, and Svelte. We found that the trade off was that it worked poorly in all of them and we couldn’t take advantage of their individual strengths.
We’ve since switched to React-based and found that, because support for React is so high, they can be incorporated elsewhere more seamlessly than “agnostic” components.
> I mean you do not install it as a dependency. It is not available or distributed via npm.
> You can use the diff command to check for updates against the registry.
Isn't that a contradiction? So they do offer automatic importing & updating but refuse to use the infrastructure everyone else is using and instead copy/paste their files directly into your project with their cli?
The idea is that this is neutral enough to gain an impression and that you theme it yourself. That has been the idea for each UI library ever since bootstrap. Doesn't mean that people take the time to actually customize it.
Had the same thought. The one part that would still require js is the exclusive opened element requirement. Still just a simple vanilla event listener.
Great! If you're not using common frontend stacks, UI kits become annoying to use if they don't have any stock HTML (or close to it Tailwind like this) versions.
> Who is Franken UI for?
> Franken UI is tailored for small teams and solo developers seeking a beautiful, reliable CSS framework without the complexity of React, Vue, or Svelte. It's designed with an "HTML-first" approach, making it accessible to developers at any skill level.
https://www.franken-ui.dev/docs/introduction
As opposed to the shadcn ui
> Which frameworks are supported?
> You can use any framework that supports React.
> Next.js, Astro, Remix, Gatsby etc.
https://ui.shadcn.com/docs
it's not about not-being-something, more like the component created by UI kit will function regardless of any framework you use, or the lack of one.
But this franken <form> element requires JavaScript to even render. Same for the tooltip, leader, cover, totop, ++ components; all of which can be done with HTML and CSS.
Fine, write your HTML is JS, but that isn't "HTML first".
edit: I stand corrected. the form will render without JS. The tab element in the docs wrapping the form doesn't render.
https://daisyui.com/
I used it for a small form + search result list recently and it works well enough for simple / static stuff.
But I think I'll still be reaching for a JS lib first since I'd miss things like inputs-with-autocomplete too much.
It would seem that all other libraries want js for something as simple as a drop-down.
Cover, leader, dropdowns and even modals, you can always use the CSS class instead of UIkit custom attributes and toggle it manually via server.
The TypeScript and Tailwind insanities are just there for easier development and my convenience. ;)
Maybe soon, someone will publish the compiled CSS. IDK
But this is true for almost every web thing, and every web framework - you can just grab the final outputs and stick it into your web page.
So either your thing is "HTML-first", but so is everything else, or your thing is not "HTML-first", and some other things are.
> Maybe soon, someone will publish the compiled CSS.
So, until then, not only is this not HTML-first, it's not HTML at all.
To me (and maybe others), there's a difference between web development and Node/npm.
They are not one and the same.
I'm also glad I'm not the only one.
I may, however, be the only one to be annoyed at what looks like a rug-pull:
"Here, come see this thing I made that doesn't require $FOO!"
> Requirements: $FOO
> Franken UI is a Tailwind CSS plugin
:|
But yeah, I'm kinda over Tailwind. You whipper-snappers think CSS sucks so much; back in my day* we had font tags and tables!
*high school
Plain CSS and containerisation provided by Svelte (or the forthcoming scope stuff) is more than enough for me.
But learning it is 100% worth it.
Tailwind is like an ORM. I get the appeal but if you know SQL /CSS it’s just going to get in the way.
But on each end is where all the interesting stuff is really happening, and a full-stack dev who embraces both SQL and CSS is a lot more useful than a full-stack dev who stays in the middle.
Sometimes I just wanna work on my app and not write css.
Even the documentation makes it extremely clear which properties are set by which class (the default ones anyway).
As an actual example: how completely braindead do you have to be to not know which properties are set from looking at the official documentation? https://tailwindcss.com/docs/overscroll-behavior
Your comparison to an ORM would work for things like Bulma, bootstrap and pretty much all component libraries, including TailwindUI. It's completely nonsensical for tailwindcss
You've either never actually looked into tailwind css and are purely talking out of your ass or are just repeating this opinion from someone that did such.
Disliking tailwind css is fine, and there are perfectly fine reasons to not use it. But your argument is just plain dumb.
It's very odd to see HN, supposedly a "self-thinker" crowd, continuously spout incorrect things because they heard someone else say it on here. Here are other things I've heard on HN repeatedly that aren't true (often in very upvoted comments).
- You can't make a static site with React
- React is only for SPAs.
- You can't use React without NextJS anymore.
- PHP is too slow for web development (maybe it is for your use case, but people seem to think it's bad for all use cases).
- PHP doesn't have strict type checking.
- NPM is somehow worse than every other packaging system (ignoring PIP, Maven, etc. NPM is surprisingly good at things that the rest of packaging systems don't get right).
Tailwind:
CSS: Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other.The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this:
Either storing that color value in JavaScript, or creating a Tailwind theme for it in tailwind.config.js: Something that could have been easily accomplished in native CSS: For most React websites, I use Tailwind by default almost always, and Tailwind UI is a great starting point for building a component library. But it still helps to support CSS for more advance styling use cases - even within Tailwind. Knowing CSS very well will make you better at Tailwind too even for common things like It's kinda important to know both as separate technologies.If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.
It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.
> Tailwind makes box shadow easier
Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows.
That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid.
I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).
> if you want something else that's up to you
Right, just like CSS. It's a very light helper library that isn't dissimilar from CSS. That's my point.
Did you ever actually write them fully by hand?
I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me.
Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway
Absolutely. Have for decades. Still do.
This is why I said Tailwind reminds me of an ORM. If you properly know the underlying technology, it just gets in the way.
And CSS is not just about properties. It's also about inheritance and DOM independence, something tailwind doesn't address.
Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL
If I get a visual spec from a designer, I'm not going to try out various numbers until it fits the image. I'll either ask them for the specific attribute if their tool allows for that or replicate it with a generator.
And if I'm fully in control myself, I'm going to use a generator too as I'll want it to look a specific way, which is easier to achieve with instantaneous feedback as you get it from a generator such as https://www.cssmatic.com/box-shadow
CSS shorthand meaning:
which is the same as: etc.I can't imagine how you would know the shorthand without first knowing the longer form. CSS shorthand requires that you know the original form + the order of values in shorthand, and when values can be omitted along with special formatting as in:
CSS shorthand is - I would say - more advanced than long form.> I'm going to ask the designer what units to use
I would never get in the habit of letting a designer tell the front-end developers how to write CSS, mainly because they work in pixels, when the developer is often using viewport units, rem for sizing, em for fonts and icons relative to an initial size and current user zoom factor, and flex gaps and alignment for spacing. That level of collaboration and specification on spacing, sizes, etc. between the developer and designer (redlining) might be part of an initial design system discussion, but the resulting component library is probably translated into a style system that works well for the engineering team.
I think it's good you're using CSS generators, I learned most of CSS that way via Dreamweaver, and have copy/pasted from CSS Tricks countless times for edge case stuff - it's a great way to learn.
I'm mostly a backend developer and TailwindCSS really enabled me to be bold with working with frontend CSS. So far I've been copy pasting examples from Tailwind or Flowbite. But "franken" really looks much closer to what I was looking for, a cleaner opinionated unified interfaces that I can put together, works with Tailwind and can be used with Rails.
Thanks for the work on this.
https://pasteboard.co/6Z1nLEWhPHRg.png
However I do like the dark theme. It manages to separate different areas without too much noise which can be hard to do without shadows.
Right now, I'm cheating a little and it only supports tablet (landscape) and up. Below that will just hide everything and show a static PNG.
The way you actually use the ui components is by including html snippets in your page
The navigation between the different exmaples on https://www.franken-ui.dev/examples/mail refreshed the website and did not restore the scroll position.
While on https://ui.shadcn.com/examples/mail, switching between the different examples keeps the scroll position and does not refresh the page.
We’ve since switched to React-based and found that, because support for React is so high, they can be incorporated elsewhere more seamlessly than “agnostic” components.
> You can use the diff command to check for updates against the registry.
Isn't that a contradiction? So they do offer automatic importing & updating but refuse to use the infrastructure everyone else is using and instead copy/paste their files directly into your project with their cli?
But it's always good to have other options like this one.
https://github.com/sveltecult/franken-ui/tree/master/src/lib...
I am using golang and htmx and am looking around for a simple html based system .
Daisyui or something might work