9 ms·
Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library
https://github.com/knadh/oat https://github.com/knadh/oat
Related: https://nadh.in/blog/javascript-ecosystem-software-development-are-a-hot-mess/ https://nadh.in/blog/javascript-ecosystem-software-developme...
- dingi 7mo ago[flagged]
- saila 7mo agoLooks neat. Assuming the site is built using the framework, I ran a couple of the component pages (e.g., accordion) through Lighthouse and there are a number of accessibility issues. Just a heads up.
- Nelkins 7mo agoDon't know about anyone else, but the first thing I do with these types of libraries to check out the Accordion component and see if it slides out with a nice animation. This has become my litmus test for how well designed a component library is.
- scandox 7mo agoWas looking at the spinner component for a few seconds thinking "that's a bit slow"...
- kitd 7mo agoGreat work! PicoCSS feels a bit too minimalist at times. This looks like a better balance of lightweight and functional.
- neon_me 7mo agoNice job! Clicked tru my obscure mobile firefox and all worked well!
- bpev 7mo agoAmazing! I recently started building something similar for the same reasons, but more out of frustration rather than out of desire. I'll have to give this one a try and see if it fills the need.
- deafpolygon 7mo agoI love it. We need to see more of this.
- bartvk 7mo agoI'm not a web dev, what do you love about it?
- deafpolygon 7mo agoIt leverages semantic html elements for styling… it may not seem like a huge deal on the surface, but it’s very useful in keeping html page sizes down, keeping the html itself simple to use, and so on. there are other similar projects out, and i like them too.
- bartvk 7mo agoThanks! I get that.
- rado 7mo ago[flagged]
- andrei_says_ 7mo agoThank you for this, can’t wait to use. Minimalism at its best.
- jlg23 7mo agoMy initial reaction was that I have to use this just because of the buzzword density in the title. But after reading up, it looks like the author was pretty successful in moving the bloat from code to announcement title. I'll give this a try!
- koakuma-chan 7mo agoThis is kind of misleading. It says it's an HTML UI library, then it says HTML + CSS, and then it says it also includes JavaScript. Why is this better than, say, DaisyUI?
- httpsterio 7mo agoIirc there's a few web components in there which would require js.
- villgax 7mo agoI just want something that's as easy to use as DaisyUI or even Bulma with one good set of components & themeing(beyond just palletes, like rounding, blur, transparency etc) & I'm good. For all the self-hosting model afficianados surely needing a build platform to create a blackhole of npm modules & internet connectivity for even a single build surely negates the entire point of a coding LLM if we still force it to deal with frontend
- koakuma-chan 7mo agoYou mean you want DaisyUI but with extended theming, like ability to make inputs, etc, rounded? This is also something I was considering.
- dang 7mo ago(Submitted title was "Oat – Ultra-lightweight, semantic, zero-dependency HTML UI component library" - we've replaced it now)
- scandinavian 7mo ago5 day old repo, 2000 stars on GitHub, 400 total weekly downloads on npm. Frontpage of hacker news with a bunch of weird comments. Moderation has been lacking recently.
- humanindia 7mo ago[dead]
- sschueller 7mo agoSad that HN is now also getting boted by LLMs. People are just shameless. HN is one of the few places left where you can post / self promote something you have made only for people to take advantage of it.
- ZeWaka 7mo agoThe strangest part is the weird commenting accounts have pretty old account ages.
- gas9S9zw3P9c 7mo agoIf you search you can easily find sites to buy aged HN accounts, lots of them. Just like reddit accounts.
- quadrifoliate 7mo agoI don't know if you're demonstrating reductio ad absurdum, but maybe that's because they are genuine? As people in the thread have pointed out, the author as well as their company is pretty well-known in software circles. They have had multiple projects discussed on HN in the past[1]. 2000 stars is not a lot given that [2]. I fail to understand why a ton of breathless blog posts about the process of AI-assisted coding are more interesting to HNers than some of the actual code (potentially, not claiming anything about it) written. Maybe you or the GP could actually say what you think are "weird comments" and why you think this is being "boted"? --------------- [1] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=knadh&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... [2] Why are people obsessed with star counts? I at least only star things to bookmark them, not vouch for them in any way. It does not seem unreasonable to me that 5 times as many people bookmarked the repo in the early days than are using it on npm. Also, npm is not necessary, the author shows at least 2 other ways to use it (direct download, link to GitHub pages) which will not show up in npm stats.
- Maxion 7mo agoThis looks very very cool. Will definitely look in to using this for more static internal tools!
- yoz-y 7mo agoClaims no classes but uses data- attributes and also classes (just look at the button example…) Looks okay, but I don’t see why to use this over something like Marx if all you need is to not have bare browser default styling.
- kitd 7mo agoThe claim is "no classes for native elements". Ie you don't need classes just to create a button etc.
- swiftcoder 7mo agoThe motivating blog post[1] linked from the front page is probably going to generate a more interesting discussion than the framework itself. As someone who has to deal with both angular and nextjs for different (but overlapping) stacks at work, I find myself increasingly sympathetic to this viewpoint. [1]: https://nadh.in/blog/javascript-ecosystem-software-development-are-a-hot-mess/ https://nadh.in/blog/javascript-ecosystem-software-developme...
- xyzzy_plugh 7mo agoPreviously (2021): https://news.ycombinator.com/item?id=28892933 https://news.ycombinator.com/item?id=28892933
- swiftcoder 7mo agoAh ha, figured it must have been discussed here before!
- skeledrew 7mo agoThis website pleases me greatly. 0 time from tap to fully loaded pages.
- e12e 7mo agoNice link - still relevant IMNHO - even though it's from 2021. Discussed at the time: https://news.ycombinator.com/item?id=28892933 https://news.ycombinator.com/item?id=28892933
- latchkey 7mo agoIt has updates at the bottom. Most recently 14 Sep 2025.
- visarga 7mo agoThis does not even need a LLM skill, just load the whole code up in context, so efficient.
- recursive 7mo agoDoesn't even need a context either.
- mkl 7mo agoSeems pretty unresponsive to me. I'm getting at least half a second of delay before the accordion, drop-down, or switch do anything. Chrome on Windows.
- mcknz 7mo agoshould call it oatmilk for max exposure
- rohitpaulk 7mo agoSurprised that none of the comments here are comparing this to Bootstrap.
- weiliddat 7mo agoYeah reminds me of early Bootstrap
- JCattheATM 7mo agoWouldn't a comparison to Bulma be more apt?
- deleted 7mo ago[deleted]
- mgaunard 7mo agoThe code example doesn't render for me.
- freeopinion 7mo agoDitto, if you mean the codeblock in the Typography section. edit: clarification, focus
- freeopinion 7mo agoThe Preview of the Sidebar doesn't display the Logout button in the footer of the sidebar. edit: That is, the footer is not within a visible area of the sidebar.
- potato-peeler 7mo agoThank you testing this on older browsers before releasing. This is truly an ultra minimal library - https://ibb.co/DDGmLYdg https://ibb.co/DDGmLYdg, https://ibb.co/h1WQG3GK https://ibb.co/h1WQG3GK
- appplication 7mo agoGenuine question, do you normally use old browsers as your daily driver for interfacing with the web? I’d be interested in learning why.
- potato-peeler 7mo agoNot as a daily driver but to make sure a software has wide support, not all users update their phone frequently. Also, many web features do not require using the latest in browser features. And just to be clear, I was poking fun at this so called “CTO”. That guy should have known better. I see many web/ui frameworks posted in HN which don’t test in older browsers but still claim to be minimal or plain.
- recursive 7mo agoPresumably it's relevant not because they use old browsers but because some of their software's users do. And I doubt most of them have a reason for doing so.
- appplication 7mo agoThat makes sense. As a solo dev for my side projects, I’ve intentionally decided to not support legacy browsers, which I understand bugs some folks (weirdly, usually the super tech minded types you find in here) but I’m just one guy and I have a hard time seeing the value in these user segments being worth the squeeze.
- akrauss 7mo agoNo Datepicker?
- bartvk 7mo agoI'm not a web dev, but doesn't HTML come with a date picker?
- LudwigNagasena 7mo agoHTML also comes with a button and an accordion.
- bdcravens 7mo agoAs pointed out in another comment, it's under the form elements, not listed as a top-level component as many UI libraries do https://oat.ink/components/#form https://oat.ink/components/#form Which actually makes sense: Oat's driving philosophy seems to be to use and enhance native controls as much as possible, and the date picker is already a native type on the input element.
- hiyer 7mo agoReminds me of what bootstrap [1] was like around a decade ago. It's gotten quite a bit bloated since then though. 1. https://getbootstrap.com/ https://getbootstrap.com/
- TrevorFSmith 7mo agoIf nothing else, it's refreshing to see nicely modern CSS and JS formatted and laid out in a legible manner. https://github.com/knadh/oat/tree/master/src https://github.com/knadh/oat/tree/master/src
- roxolotl 7mo agoThere’s a ton of semantic drop in css libraries similar to this. Love seeing new ones. Quality varies wildly but this site shows 50+ drop in stylesheets for those writing semantic html: https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/
- sgc 7mo agoI love it. You can use the right arrow to cycle through them.
- neya 7mo agoThis isn't upvoted enough. This is more interesting than the OP's project! Thanks for sharing!
- layer8 7mo agoI had to read your comment three times before figuring out that you mean “drop-in”. Sometimes hyphens do matter! :)
- heyyeah 7mo agodo you have any recommendations from the list?
- roxolotl 7mo agoHere’s some that seem genuinely useful to me depending on what you’re looking for. - https://concrete.style/ https://concrete.style/ - water.css https://watercss.kognise.dev/ https://watercss.kognise.dev/ - magick.css https://css.winterveil.net/ https://css.winterveil.net/ - mui.css: https://www.muicss.com/ https://www.muicss.com/ - pico.css: https://picocss.com/ https://picocss.com/
- dankobgd 7mo agoPeople need to stop with these stupid 12 column grids and learn how grid and flex work. Other elements are ok but this is just stupid
- pphysch 7mo agoIt's a 12 column grid system built with CSS Grid. 12 column grids are a common design pattern. What would you propose instead?
- JSR_FDED 7mo agoThis has the simplicity I thought I was going to get from DaisyUI but didn’t. Pairing this with Datastar seems like a super powerful combination that leans on actual web standards, not “ecosystems”.
- Xeoncross 7mo agoThank you for sharing, I would like to see a navigation/menu component added though as that's required for most websites.
- anton-107 7mo agoWhy do all the UI component libraries always feature an accordion (something i can build myself in 5 minutes and very rarely need), but always omit a date picker / calendar component (something that is needed almost in every corporate web form and really requires a lot of effort to build)?
- anton-107 7mo agoI must appoligize - it is there, hidden under "Form elements" in the left menu. Kudos to the authors!
- speedgoose 7mo agoIsn't it the one from the web browser? An <input type="datetime-local" /> https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- webstrand 7mo agoThat one is highly inconsistent, on some platforms its useless. For instance on Chrome/linux entering historic dates via the datepicker takes minutes to slowly scroll through the years. Always build your own datepicker, you know better what UX pattern will best suit your application and your users.
- maximalthinker 7mo ago[dead]
- skeledrew 7mo agoThis site got me going. Almost had whiplash when I tapped a link and the page loaded literally instantly. I've almost forgotten that that's possible on the internet. I'm not a web dev, but I'm inspired to get into it now because of this site.
- thedumbname 7mo agoTry uBlock Origin and most of your sites will load instantly (hint: most of the time it is third-party analytics/ads issue)
- skeledrew 7mo agoI have many blockers. Doesn't help performance at all IMO.
- darkvertex 7mo agoYou should try making a site with Astro. Load speed is cray cray.
- allthetime 7mo agoYeah I’m a recent Astro convert. To be fair, any static site will have this effect. It’s just everyone is using react to make landing pages now.
- ethmarks 7mo agoWhat makes Astro fast isn't just that it's static, it's that it automatically pre-renders and it doesn't ship a runtime. React can render to static as well, it just also ships the React runtime.
- robertoandred 7mo agoReact sites are easily static.
- 7mo ago
- nkmnz 7mo agoI know that guy from listmonk! I always thought the frontend could use some love and planned to spend a couple of days on contributing a couple of ideas, but I never came around. Now I know why things are as they are :)
- superkuh 7mo agoNo, this is "Oat - Ultra-lightweight, semantic, zero-dependency Javascript UI component library". If it doesn't work without javascript it is not an HTML UI component library.
- recursive 7mo agoIf it doesn't work without HTML, it's not a JS library.
- masklinn 7mo agoIt’s a bit odd that the accordion uses details but the dropdowns require a custom element.
- intrasight 7mo agoWhat's with variable names starting with "#" as first character?
- animal_spirits 7mo agoThat's just markdown headers. Some people like to include # as part of the header aesthetic
- chrisweekly 7mo agoNo, the Q was about javascript not markdown. Peer comment from afishh (9m after yours) has it right.
- afishhh 7mo agoIf you are referring to class members in the JavaScript then those are private fields[1] [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- intrasight 7mo agoI had Googled my question too. Got no hits which is why I asked. Haven't seen it before.
- eddd-ddde 7mo agoThe "preview" and "code" buttons in the components break the "alt+arrow" bindings to go back to the previous page. Instead it just alternates between "preview" and "code".
- temporallobe 7mo agoThis is of special interest to me, because man do I hate UI frameworks with tons of external dependencies. Looking at you, Bootstrap.
- mxuribe 7mo agoI used to think bootstrap was bloated too...and then i had heard - now, i don't know if its true - that bootstrap was originally intended *ONLY* as an internal prototype building tool, and any bloat did not matter...because expected audience, usage would be totally fine for a bloated framework...When i heard, i gave boostrap more of a pass...but, then again, i stopped using it, and began using other, lighter weight frameworks...and nowadays, i so rarely touch any web stuff...and when i do its only for me so then use zero frameworks, and merely display whatever default the browser shows with zero CSS, javascript...then again, my private web page needs are so basic anyway.
- temporallobe 7mo agoThe problem with Bootstrap is that it depends on jQuery and Popper, and its CSS has global classes. It’s perfectly fine if BS is the only UI framework, but if you need to bring to bring in other frameworks or libraries (by choice or by force), then there’s a chance you’ll run into conflicts.
- istillwritecode 7mo agobootstrap has not depended on jquery for a long time now.
- temporallobe 7mo agoUnless you’re stuck on an older version. Also there is a jQuery resolver still embedded even in the latest version that looks for jQuery and tries to use it if it’s globally defined. Caused some nasty bugs in certain Enterprise applications and I have had to manually gut this from the official release.
- jamamp 7mo agoI think it's valiant to try to do all of this with semantic HTML elements to achieve the right effects, and try to go for a "classless CSS" paradigm to get a nice looking and functional web app (as a fan of classless CSS myself). But scrolling through the component catalog, it unfortunately feels like it's all over the place and inconsistent with semantic vs basic elements, data tags vs aria attributes, and sprinkling some css classes over some of it. I do very much like that by introducing aria attributes, the CSS reacts to it and styles it appropriately. As opposed to a full-blown react component library which does all of that for you. It would be a good exercise for developers to think aria-first and let the library just help with styling. Lastly, I think the best part is that this component library has a native sidebar. So many of these I see and they have a nice web page which showcases all the components and I want to replicate their layout and nav/sidebars but they only focus on smaller re-usable components and not the layout. So that's a nice touch, I think. And, as someone who keeps an eye on but doesn't do a lot of frontend, the fact that a sidebar is an aside > nav > ul next to a main just makes so much sense and doesn't have a lot of cruft around it.
- gaigalas 7mo agoThe form component: https://oat.ink/components/#form https://oat.ink/components/#form Looks a lot like a raw HTML+CSS framework I made in 2009: https://alganet.github.io/ghiaweb/ https://alganet.github.io/ghiaweb/ (it has some small glitches, browser widgets changed a lot since 2009). Particularly the use of the label, fieldset and legend elements as native accessible solutions instead of instrumenting divs. Even the styling and the example resembles it a bit! https://oat.ink/components/#grid https://oat.ink/components/#grid This is where it falls from grace IMHO. Grid classes are fundamentally non-semantic. I know they're popular and useful, but there must be a better (semantic) way of doing this. I haven't found it yet, but there must be.
- elseleigh 7mo agoThis is a very nice library. At a first reading it seems complete (but did I see summary/detail - I don't remember). Bookmarked for further investigation. Congratulations and thank you.
- altcunn 7mo ago[flagged]
- boston_clone 7mo agoGenerated comments and bots aren't allowed here, see: https://news.ycombinator.com/item?id=46888857 https://news.ycombinator.com/item?id=46888857
- wvlia5 7mo agoHow did you detect it?
- boston_clone 7mo agoem dashes, sycophancy, exaggerated details vis a vis metaphors, AI evangelism in bio, and my own dash of undiagnosed ASD. pattern-seek for yourself: check their other comments; some seem legitimate which might suggest a human in the loop.
- hkt 7mo agoThis is gorgeous. I hate frontend because of its sheer gratuity, and this is the kind of thing that might get me back into it. The only other contender for interactivity I'd consider is HTMX, and I'm going to boldly assume I'll be able to combine them without too much bother. Bravo to the author, keep at it. I'll be recommending this to anyone who will listen.
- humanindia 7mo ago[dead]
- mrbluecoat 7mo agoNice solution. Reminds me of https://semantic-ui.com/ https://semantic-ui.com/ and https://fomantic-ui.com/ https://fomantic-ui.com/
- scirob 7mo agoultra-lightweight, these dev's probably go hiking. I like : )
- jitbit 7mo agoI tried doing something like that in my app, and quickly discovered that some modern semantic/functional tags are STILL not supported in some browsers. Or work badly. For example, in Safari showModal for a dialog tag causes recalculating layout for EVERY element on a page, it’s up to 59x slower than chromium…. :( But I love the idea
- vpribish 7mo agohow do you contrast this with https://picocss.com/ https://picocss.com/ ? I like your presentation of the components, but i'm having trouble finding the essential distinctions
- leejoramo 7mo agoI often use Pico CSS, and a comparison would be nice.
- bitbasher 7mo agoConfusing name, conflicts with Oat++? https://oatpp.io/ https://oatpp.io/
- culi 7mo ago<aside> is not the correct semantic element for sidebars. The purpose of <aside> is for content that is indirectly related to the "main" content of the page. Sometimes a sidebar fits that definition but not always
- mixmastamyk 7mo agoLooks good and like the lightweight aspect. As always, what do I have to do get tabs that look like tabs? What do people have against tabs that look like tabs, instead of buttons?
- synergy20 7mo agohttps://github.com/fosiao/rclone-webui-oat https://github.com/fosiao/rclone-webui-oat seems replacing the heavy duty unmaintained react version at https://github.com/rclone/rclone-webui-react https://github.com/rclone/rclone-webui-react
- gormen 7mo agoThe appeal of libraries like this is not minimalism for its own sake, but the reduction of long‑term operational risk.
- wsaryoo 7mo agoI am building thing similar https://jingz.github.io/farga/site/index.html https://jingz.github.io/farga/site/index.html
- wsaryoo 7mo agoFocusing on using it for admin application or data density site
- mega-tux 7mo agoI like it. Currently I'm using BeerCSS and I'm pretty satisfied with it. This library is smaller. Any other selling aspect vs BeerCSS? Thanks!