13 ms·
HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI
- SEXMCNIGGA24531 2y ago[flagged]
- 2genders6966 2y ago[flagged]
- 2genders30123 2y ago[flagged]
- sexmc35688 2y ago[flagged]
- 2genders10037 2y ago[flagged]
- 2genders36913 2y ago[flagged]
- ivanjermakov 2y agoMods are asleep and someone bombarding HN with spam..
- slavetologic 2y agoFree ai girlfriend sounds amazing
- Traubenfuchs 2y agoNobody said anything about "free".
- cebert 2y agoWhat is going on with the spam. It’s not even good spam.
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- CharlesW 2y agoTaking 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.
- datascienced 2y agoFor clarification I think my parent comment is referring to the now dead comments, not the submission.
- SEXMCNIGGA35416 2y ago[dead]
- SEXMCNIGGA14503 2y ago[dead]
- sexmc37338 2y ago[flagged]
- sexmc36604 2y ago[flagged]
- gedw99 2y agoVery disappointed. It’s typescript, not quite framework independent. https://github.com/sveltecult/franken-ui/tree/master/src/lib/components 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
- anomaloustho 2y agoWe 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.
- Alifatisk 2y agoI 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 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 https://ui.shadcn.com/examples/mail, switching between the different examples keeps the scroll position and does not refresh the page.
- 2genders8976 2y ago[flagged]
- 2genders42998 2y ago[flagged]
- SEXMCNIGGA15607 2y ago[dead]
- 2genders42998 2y ago[flagged]
- 2genders4244 2y ago[flagged]
- 2genders9277 2y ago[flagged]
- 2genders37082 2y ago[flagged]
- 2genders40018 2y ago[flagged]
- 2genders38844 2y ago[flagged]
- 2genders36035 2y ago[flagged]
- 2genders45922 2y ago[flagged]
- 2genders13057 2y ago[flagged]
- 2genders4161 2y ago[flagged]
- 2genders42980 2y ago[flagged]
- 2genders32700 2y ago[flagged]
- 2genders1261 2y ago[flagged]
- 2genders49491 2y ago[flagged]
- 2genders24716 2y ago[flagged]
- 2genders20183 2y ago[flagged]
- 2genders25672 2y ago[flagged]
- SEXMCNIGGA8027 2y ago[dead]
- SEXMCNIGGA941 2y ago[flagged]
- 2genders968 2y ago[flagged]
- 2genders48513 2y ago[flagged]
- 2genders21299 2y ago[flagged]
- 2genders31142 2y ago[dead]
- 2genders816 2y ago[flagged]
- 2genders31142 2y ago[flagged]
- 2genders42516 2y ago[flagged]
- 2genders17435 2y ago[flagged]
- 2genders3253 2y ago[dead]
- 2genders18 2y ago[flagged]
- 2genders39646 2y ago[flagged]
- 2genders43015 2y ago[flagged]
- 2genders22374 2y ago[flagged]
- 2genders20975 2y ago[flagged]
- 2genders38654 2y ago[flagged]
- 2genders28879 2y ago[flagged]
- 2genders33730 2y ago[flagged]
- 2genders18299 2y ago[flagged]
- 2genders27218 2y ago[dead]
- 2genders19317 2y ago[flagged]
- 2genders3253 2y ago[dead]
- 2genders2513 2y ago[flagged]
- 2genders45275 2y ago[flagged]
- 2genders9163 2y ago[flagged]
- 2genders2099 2y ago[flagged]
- 2genders1206 2y ago[dead]
- 2genders20592 2y ago[flagged]
- 2genders3638 2y ago[flagged]
- SEXMCNIGGA16119 2y ago[flagged]
- SEXMCNIGGA17999 2y ago[flagged]
- SEXMCNIGGA19991 2y ago[flagged]
- SEXMCNIGGA26515 2y ago[flagged]
- SEXMCNIGGA16153 2y ago[dead]
- SEXMCNIGGA18717 2y ago[dead]
- SEXMCNIGGA29695 2y ago[dead]
- SEXMCNIGGA21425 2y ago[dead]
- SEXMCNIGGA16603 2y ago[dead]
- SEXMCNIGGA20978 2y ago[dead]
- SEXMCNIGGA30567 2y ago[dead]
- SEXMCNIGGA33051 2y ago[dead]
- SEXMCNIGGA34130 2y ago[dead]
- SEXMCNIGGA11537 2y ago[dead]
- indianmilf45976 2y ago[dead]
- indianmilf30045 2y ago[dead]
- indianmilf11409 2y ago[dead]
- indianmilf25313 2y ago[flagged]
- indianmilf21126 2y ago[flagged]
- indianmilf38252 2y ago[flagged]
- indianmilf30755 2y ago[flagged]
- indianmilf15961 2y ago[flagged]
- indianmilf36279 2y ago[flagged]
- indianmilf15310 2y ago[flagged]
- indianmilf48152 2y ago[flagged]
- indianmilf34854 2y ago[flagged]
- indianmilf48444 2y ago[flagged]
- indianmilf31403 2y ago[flagged]
- indianmilf11877 2y ago[flagged]
- indianmilf35174 2y ago[flagged]
- indianmilf4363 2y ago[flagged]
- indianmilf36812 2y ago[flagged]
- sexmc29153 2y ago[flagged]
- sexmc9970 2y ago[flagged]
- sexmc12141 2y ago[flagged]
- sexmc35838 2y ago[flagged]
- sexmc16673 2y ago[flagged]
- sexmc28911 2y ago[flagged]
- sexmc8025 2y ago[flagged]
- sexmc16058 2y ago[flagged]
- sexmc6421 2y ago[flagged]
- sexmc33615 2y ago[flagged]
- sexmc28363 2y ago[flagged]
- sexmc32264 2y ago[flagged]
- sexmc23466 2y ago[flagged]
- sexmc1649 2y ago[flagged]
- canadiantim 2y agoLooks cool!
- kevincox 2y agoThe 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 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.
- sveltecult 2y agoHello, 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.
- kevincox 2y agoFirefox on desktop Linux 2k monitor with 22px font size.
- TheRealPomax 2y agoThis 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.
- tbeseda 2y agoI'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.
- sveltecult 2y agoThe 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.
- tbeseda 2y agoAh 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
- Frotag 2y agoDaisyUI offers zero-JS components https://daisyui.com/ 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.
- naasking 2y agoI 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!
- afavour 2y ago> framework-agnostic > Franken UI is a Tailwind CSS plugin :|
- oddevan 2y agoAs 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
- afavour 2y agoYeah 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.
- emseetech 2y agoCSS 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.
- _akhe 2y agoI 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.
- hanniabu 2y agoFoolish of me to think "HTML-first" meant it wouldn't require nodejs/npm and that dependency hell.
- 708733454927516 2y agoThanks for that. Good to know I wasn't the only one...
- lelanthran 2y ago> 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
- squigglydonut 2y agoThis made me want to unlearn react.
- andrethegiant 2y agoHow about some color? Or in other words, how much longer until the Vercel-inspired brutalism fad wears off?
- spiderfarmer 2y agoThe 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.
- chimen 2y agoI see minimalism, not brutalism and, comparing Vercel's design with Netlify's (from your bio), guess where I find the brutalism...
- kewp 2y agoThis is great, have been looking for something like this.
- begueradj 2y agoIt 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.
- bibstha 2y agoThis 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.
- camillovisini 2y agoMaybe this is also interesting for you: https://github.com/aviflombaum/shadcn-rails https://github.com/aviflombaum/shadcn-rails
- bibstha 2y agoInteresting, just gave this a try and looks pretty decent.
- lenkite 2y agoWhy is this advertised as HTML-first and framework-agnostic ? It directly leverages tailwind and UIKit libraries. That is NOT framework agnostic by any means.
- codetrotter 2y agoWhen 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 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 https://ui.shadcn.com/docs
- nsonha 2y ago> 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.
- Capricorn2481 2y agoTailwind is just a convenience compiler for CSS, it's hardly a framework.
- nsonha 2y agoby that logic nothing is a framework, everything "compiles" to js and css
- Capricorn2481 2y agoI 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.
- mubu 2y agoIt 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.
- stanac 2y agoI 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.
- Traubenfuchs 2y 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?
- TheCapeGreek 2y agoGreat! 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.
- tambourine_man 2y agoHTML-first, yet there’s not a single line of it in the documentation’s introduction.
- gloosx 2y agoHave 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
- ricardobeat 2y agoIndeed. 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.
- devops000 2y agoI still wonder why they cannot use <detail> tag for a dropdown instead of using JS.
- gibbitz 2y agoHad the same thought. The one part that would still require js is the exclusive opened element requirement. Still just a simple vanilla event listener.
- dankobgd 2y agoUseless trash. Imagine not using web components in 2024 and you still use tailwinds and stuff.
- snow_mac 2y 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} } })`.
- afiori 2y agoMy 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
- replwoacause 2y agoI’ve been looking for something like this forever. Thank you!