HNPWA with Next.js

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

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.

lenkite | 11 days ago

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

gloosx | 11 days ago

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.

TheRealPomax | 11 days ago

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.

mubu | 11 days ago

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

hanniabu | 11 days ago

> framework-agnostic

> Franken UI is a Tailwind CSS plugin

afavour | 11 days ago

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.

bibstha | 11 days ago

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!

naasking | 11 days ago

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.

kevincox | 11 days ago

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

snow_mac | 10 days ago

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.

Alifatisk | 9 days ago

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.

anomaloustho | 10 days ago

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

Traubenfuchs | 11 days ago

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

andrethegiant | 11 days ago

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

devops000 | 11 days ago

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

tambourine_man | 11 days ago

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.

TheCapeGreek | 11 days ago

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.

begueradj | 11 days ago

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

replwoacause | 10 days ago

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

kewp | 11 days ago

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