HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI | Hacker News Reader

HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

franken-ui.dev

213 pointssveltecult84 comments

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.

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

> not being dependent on using React

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.

Tailwind is just a convenience compiler for CSS, it's hardly a framework.

There are Javascript frameworks and CSS frameworks. Tailwind is the later one. Even the Tailwind front page describes it as a CSS framework.

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.

by that logic nothing is a framework, everything "compiles" to js and css

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.

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

DaisyUI offers zero-JS components

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.

DaisyUI is a blessing when working on qwik projects, since there is an emphasis on eliminating hydration.

It would seem that all other libraries want js for something as simple as a drop-down.

See also Bulma; you can totally get by without JS for most projects, though again, you'll miss out on the more interactive things.

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.

They are not one and the same.

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!

Yes - absolutely misleading. At least the name seems to originate from „Frankenstein“ which perfectly matches.

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.

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.

The executable on Linux is called code

Foolish of me to think "HTML-first" meant it wouldn't require nodejs/npm and that dependency hell.

Thanks for that. Good to know I wasn't the only one...

> Thanks for that. Good to know I wasn't the only one...

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

> framework-agnostic

> Franken UI is a Tailwind CSS plugin

As someone using Svelte for a project, I'm always happy to see something less React-specific.

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

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.

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

> Tailwind and regular CSS are hardly distinct, it's just slightly different names

Tailwind:

  <div className="shadow-lg" />

CSS:

  div {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

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:

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a'
        }
      }
    }
  }

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.

Tailwind v4 is getting rid of tailwind.config.js in favor of regular css as config.

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.

> a very extreme example

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

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

> Knowing the shorthand and actually writing it are different things

CSS shorthand meaning:

  margin: 0 0 1rem;

which is the same as:

  margin-top: 0;
  margin-right: 0;  
  margin-bottom: 1rem;
  margin-left: 0;

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:

  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.

| Did you ever actually write them fully by hand?

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.

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.

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.

Had the same thoughts, I like the tailwind className approach enough but you'd think agnostic means it would work with sites that use regular CSS.

Indeed. I clicked to see an HTML-first UI library but entered a utility-first Tailwind library.

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.

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.

Thanks for the work on this.

Maybe this is also interesting for you: https://github.com/aviflombaum/shadcn-rails

Interesting, just gave this a try and looks pretty decent.

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:

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.

Hello, thank you for feedback. Mind sharing what device are you using? That will definitely help me I'd be happy to fix it.

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.

Firefox on desktop Linux 2k monitor with 22px font size.

"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} } })`.

My understanding is that is the configuration part where the library interacts with tailwind to compile the css.

The way you actually use the ui components is by including html snippets in your page

I noticed on difference between franken-ui.dev and ui.shadcn.com

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 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?

How about some color? Or in other words, how much longer until the Vercel-inspired brutalism fad wears off?

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.

I see minimalism, not brutalism and, comparing Vercel's design with Netlify's (from your bio), guess where I find the brutalism...

I still wonder why they cannot use <detail> tag for a dropdown instead of using JS.

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.

HTML-first, yet there’s not a single line of it in the documentation’s introduction.

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.

It looks similar to Tailwind UI and other free and paid alternatives which components you can also reuse and modify at will.

But it's always good to have other options like this one.

I’ve been looking for something like this forever. Thank you!

This is great, have been looking for something like this.

Very disappointed. It’s typescript, not quite framework independent.

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

Looks cool!

This made me want to unlearn react.

Mods are asleep and someone bombarding HN with spam..

Free ai girlfriend sounds amazing

Nobody said anything about "free".

What is going on with the spam. It’s not even good spam.

Taking 30 seconds to send an email to Hacker News <hn@ycombinator.com> is shockingly effective and a nice thing to do for the HN community.

For clarification I think my parent comment is referring to the now dead comments, not the submission.

Useless trash. Imagine not using web components in 2024 and you still use tailwinds and stuff.

Reply on news.ycombinator.com