[HN Gopher] HTML-first, framework-agnostic implementation of sha...
___________________________________________________________________
HTML-first, framework-agnostic implementation of shadcn/UI -
franken/UI
Author : sveltecult
Score : 202 points
Date : 2024-04-22 22:18 UTC (1 days ago)
(HTM) web link (www.franken-ui.dev)
(TXT) w3m dump (www.franken-ui.dev)
| ivanjermakov wrote:
| Mods are asleep and someone bombarding HN with spam..
| slavetologic wrote:
| Free ai girlfriend sounds amazing
| Traubenfuchs wrote:
| Nobody said anything about "free".
| cebert wrote:
| What is going on with the spam. It's not even good spam.
| CharlesW wrote:
| 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.
| datascienced wrote:
| For clarification I think my parent comment is referring to the
| now dead comments, not the submission.
| canadiantim wrote:
| Looks cool!
| kevincox wrote:
| 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.
| sveltecult wrote:
| 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.
| kevincox wrote:
| Firefox on desktop Linux 2k monitor with 22px font size.
| naasking wrote:
| 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!
| afavour wrote:
| > framework-agnostic
|
| > Franken UI is a Tailwind CSS plugin
|
| :|
| oddevan wrote:
| 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
| afavour wrote:
| 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.
| prisenco wrote:
| 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.
| bschmidt1 wrote:
| 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.
| balls187 wrote:
| 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.
| ffsm8 wrote:
| 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.
| Capricorn2481 wrote:
| 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).
| bschmidt1 wrote:
| > 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.
| mubu wrote:
| Tailwind v4 is getting rid of tailwind.config.js in favor
| of regular css as config.
| nullandvoid wrote:
| 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.
| bschmidt1 wrote:
| 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.
| tipiirai wrote:
| Indeed. I clicked to see an HTML-first UI library but entered a
| utility-first Tailwind library.
| jillesvangurp wrote:
| 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.
| TheRealPomax wrote:
| 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.
| tbeseda wrote:
| 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.
| sveltecult wrote:
| 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.
| tbeseda wrote:
| 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
| Frotag wrote:
| 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.
| eddd-ddde wrote:
| 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.
| bouncing wrote:
| See also Bulma; you can totally get by without JS for most
| projects, though again, you'll miss out on the more
| interactive things.
| sveltecult wrote:
| 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
| lelanthran wrote:
| > 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.
| rzmmm wrote:
| 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
| blooalien wrote:
| 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!
| hilti wrote:
| Yes - absolutely misleading. At least the name seems to
| originate from ,,Frankenstein" which perfectly matches.
| hanniabu wrote:
| Foolish of me to think "HTML-first" meant it wouldn't require
| nodejs/npm and that dependency hell.
| 708733454927516 wrote:
| Thanks for that. Good to know I wasn't the only one...
| lelanthran wrote:
| > 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 wrote:
| This made me want to unlearn react.
| andrethegiant wrote:
| How about some color? Or in other words, how much longer until
| the Vercel-inspired brutalism fad wears off?
| spiderfarmer wrote:
| 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.
| chimen wrote:
| I see minimalism, not brutalism and, comparing Vercel's design
| with Netlify's (from your bio), guess where I find the
| brutalism...
| kewp wrote:
| This is great, have been looking for something like this.
| begueradj wrote:
| 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.
| bibstha wrote:
| 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.
| camillovisini wrote:
| Maybe this is also interesting for you:
| https://github.com/aviflombaum/shadcn-rails
| bibstha wrote:
| Interesting, just gave this a try and looks pretty decent.
| lenkite wrote:
| 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.
| codetrotter wrote:
| 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
| Capricorn2481 wrote:
| Tailwind is just a convenience compiler for CSS, it's hardly a
| framework.
| jasaldivara wrote:
| There are Javascript frameworks and CSS frameworks. Tailwind
| is the later one. Even the Tailwind front page describes it
| as a CSS framework.
| 9dev wrote:
| 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.
| cqqxo4zV46cp wrote:
| 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.
| mubu wrote:
| 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.
| stanac wrote:
| 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.
| LoganDark wrote:
| 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.
| afiori wrote:
| The executable on Linux is called code
| Traubenfuchs wrote:
| > 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 wrote:
| 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.
| tambourine_man wrote:
| HTML-first, yet there's not a single line of it in the
| documentation's introduction.
| gloosx wrote:
| 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
| ricardobeat wrote:
| 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.
| devops000 wrote:
| I still wonder why they cannot use <detail> tag for a dropdown
| instead of using JS.
| dankobgd wrote:
| Useless trash. Imagine not using web components in 2024 and you
| still use tailwinds and stuff.
| snow_mac wrote:
| "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} } })`.
| replwoacause wrote:
| I've been looking for something like this forever. Thank you!
___________________________________________________________________
(page generated 2024-04-23 23:02 UTC)