[{"data":1,"prerenderedAt":466},["ShallowReactive",2],{"project-43971688":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":42,"post_text":44,"what":45,"said":94,"maker_in_thread":224,"shape":236,"grid":240,"attempts":427,"same_week":428,"maker_shows":268,"maker_hidden":457,"reader_version":458,"card":459},"43971688","Basecoat","shadcn\u002FUI components, no React required","title","Show HN: Basecoat – shadcn\u002FUI components, no React required",null,"hunvreus",1747135360,2025,146,77,510,3837,14,"notable","dev_tools","ui component library","library",[23,24,25,26],"shadcn ui","tailwind components","html components","alpine.js","loved",0.484,{"positive":30,"neutral":31,"mixed":32,"critical":33},19,10,1,2,32,{"execution":36,"docs":37,"design":39,"idea":41},{"positive":33,"critical":33},{"positive":32,"critical":38},0,{"positive":40,"critical":38},3,{"positive":40,"critical":38},[40,43,40,40,43,38,40,43,43,43,38,38,40,38,38,38,43,40,43,40,43,43,40,43,32,43,38,40,43,43,43,32,40,38,43,43,43,43,43,38],5,"Basecoat ports the upcoming shadcn\u002Fui v4 [1] to plain HTML + Tailwind (no React):\n\n- Live demo & documentation: https:\u002F\u002Fbasecoatui.com\n\n- MIT‑licensed and free: https:\u002F\u002Fgithub.com\u002Fhunvreus\u002Fbasecoat\u002F\n\n- Works with any backend (Flask, Django, Rails, PHP, etc.) or static site.\n\n- Fully theme‑compatible with shadcn\u002Fui [2].\n\n- Uses a sliver of Alpine.js only for a few interactive bits (e.g. combobox). Swap in your own JS if you prefer.\n\n- Dead simple to use, just drop in a class here and there:\n\n\n```\n  \u003Cbutton class=\"btn\" data-tooltip=\"This is a tooltip text\">Click me\u003C\u002Fbutton> \n```\n Why I built it:",{"problem":46,"audience":52,"pricing":60,"motivation":64,"time_to_build":68,"stack":74,"openness":91,"stage":92,"team_size":93},{"value":47,"source":48,"evidence":49},"Using shadcn\u002Fui components without React or Vue, with plain HTML and Tailwind","maker",[50],{"id":51},"post",{"value":53,"source":48,"evidence":54},"Web developers using Flask, Django, Rails, PHP or static sites who want shadcn-style components",[55,56],{"id":51},{"id":57,"by":58,"text":59},"43975192","wafadaar","Bootstrap is a completely different framework with a different design language (one that many may precieve as out of fashion). This library\u002Fframework allows folks to use ShadCN…",{"value":61,"source":48,"evidence":62},"Free, MIT licensed",[63],{"id":51},{"value":65,"source":48,"evidence":66},"Missed shadcn\u002Fui after moving from Next.js back to Flask, Tailwind and HTMX",[67],{"id":51},{"value":69,"source":48,"evidence":70},"A few weeks",[71],{"id":72,"by":10,"text":73},"43978893","Thanks a lot, I got this done over the course of a few weeks and had no idea whether people would find this helpful. Looking forward to seeing others using it in the wild.",[75,79,86],{"value":76,"source":48,"evidence":77},"HTML",[78],{"id":51},{"value":80,"source":48,"evidence":81},"Tailwind CSS",[82,83],{"id":51},{"id":84,"by":10,"text":85},"43978978","- I prefer using Alpine rather than Vanilla JS these days. But the JS code is only for dialogs, combobox and tabs. I don't even use it myself on most simple projects. Curious…",{"value":87,"source":48,"evidence":88},"Alpine.js",[89,90],{"id":51},{"id":84,"by":10,"text":85},"open_source","launched","solo",{"praise":95,"objections":127,"requests":145,"questions":175,"alternatives":194},[96,112],{"value":97,"source":98,"evidence":99},"Fills a gap for server-rendered UI component kits","commenter",[100,104,108],{"id":101,"by":102,"text":103},"43977319","juddlyon","There’s a huge need for this, thank you! I build server-rendered marketing sites and there’s a huge gulf between the jQuery and React era.",{"id":105,"by":106,"text":107},"43976242","czhu12","Really great! A major downside of moving from SPA's back to vanilla JS is how much you lose in terms of UI components. I've normally done DaisyUI + Tailwind + Rails but it never…",{"id":109,"by":110,"text":111},"43976866","klaussilveira","This is great! The HTMX community needs more friendly UI kits like this.",{"value":113,"source":98,"evidence":114},"Nice look and feel of shadcn style",[115,119,123],{"id":116,"by":117,"text":118},"43981795","pxheller","This is great! I really like the style of shadcn\u002Fui. Recently I’ve been using ChatGPT to convert shadcn components to JinjaX. Will definitely give yours a try!",{"id":120,"by":121,"text":122},"43977040","anon1094","Glad you shared this. Looks nice!",{"id":124,"by":125,"text":126},"43974782","campak","I dig it. Love this",[128,138],{"value":129,"source":98,"evidence":130},"Tailwind dependency is a problem for some users",[131,135],{"id":132,"by":133,"text":134},"43974037","pacmanche","Now you just need to remove Tailwind",{"id":136,"by":125,"text":137},"43974817","and then... that solves the issue of a Tailwind dep",{"value":139,"source":98,"evidence":140},"Some styles did not load in Safari and Firefox",[141],{"id":142,"by":143,"text":144},"43975208","jmisavage","FYI I don't think all of your styles are loading on the page. Tried safari and firefox and it doesn't look right.",[146,153,161,168],{"value":147,"source":98,"evidence":148},"CDN option for quick start",[149],{"id":150,"by":151,"text":152},"43972980","replwoacause","Looks nice! Can you add a CDN option? Would be nice for a quick start to play around. Also, reminds me of https:\u002F\u002Ffranken-ui.dev",{"value":154,"source":98,"evidence":155},"Remove Tailwind dependency, raw CSS build",[156,160],{"id":157,"by":158,"text":159},"43976677","rglullis","Would you be interested in getting rid of Tailwind and have the styling strictly with SASS mixins?",{"id":132,"by":133,"text":134},{"value":162,"source":98,"evidence":163},"Focus trap in dialogs",[164],{"id":165,"by":166,"text":167},"43974789","gsanderson","Looks great! One suggestion would be adding a focus trap, such as when a Dialog opens. It's nice to use the tab key to move around the Dialog (inputs and buttons). Currently…",{"value":169,"source":98,"evidence":170},"Framework integration examples",[171],{"id":172,"by":173,"text":174},"43972543","BenderV","Awesome. Using Vue\u002FTailwind, I'm definitely interested in this. Maybe you could try to add examples of integrations with others frameworks? I'll play with it and give you my 2…",[176,183],{"value":177,"source":98,"evidence":178},"Why Alpine.js instead of web components",[179],{"id":180,"by":181,"text":182},"43974558","o_m","Why did you decide going old school using Alpine.js instead of using plain vanilla web components?",{"value":184,"source":98,"evidence":185},"Was the port automated or manual",[186,190],{"id":187,"by":188,"text":189},"43975517","exiguus","> Why I built it: after moving from a Next.js stack back to Flask + Tailwind + HTMX, I missed shadcn\u002Fui and didn’t want walls of Tailwind classes (like Flowbite or Preline). I…",{"id":191,"by":192,"text":193},"43975342","WilcoKruijer","Very cool! Are you manually porting all components or are you using some sort of automated process?",[195,199,206,213,217],{"value":196,"source":98,"evidence":197},"Franken UI",[198],{"id":150,"by":151,"text":152},{"value":200,"source":98,"evidence":201},"shadcn-vue",[202],{"id":203,"by":204,"text":205},"43975572","codybontecou","Not sure if you're aware, but there's a well-supported Vue ShadCN library: https:\u002F\u002Fwww.shadcn-vue.com\u002F",{"value":207,"source":98,"evidence":208},"Pines UI",[209],{"id":210,"by":211,"text":212},"43975854","Jonovono","This is awesome. I did the same and have been using AlpineJS Pines UI library. Been pretty happy with it! But will take a look at this",{"value":214,"source":98,"evidence":215},"DaisyUI",[216],{"id":105,"by":106,"text":107},{"value":218,"source":98,"evidence":219},"Bootstrap",[220],{"id":221,"by":222,"text":223},"43975067","boxed","Can someone eli5 how this is different from something like bootstrap?",{"comments":34,"answered":225,"key":226},9,[227,230,233],{"id":228,"text":229},"43978754","It was all done manually.",{"id":231,"text":232},"43973282","Yep, I've been considering adding a CDN option. I think it may be on the heavier side though (~100k).",{"id":234,"text":235},"43978820","Yeah, I looked into it but wanted to avoid adding plugins. I already do a bit of (simple) focusing here and there, so it shouldn't leave the focus on the background:…",{"commenters":237,"max_depth":43,"maker_replies":34,"first_comment_mins":238,"lifespan_hours":239},39,107,65,[241,243,245,247,249,251,252,255,257,259,262,264,267,269,271,273,275,278,280,283,285,287,289,293,295,297,300,302,304,307,310,313,315,317,318,320,322,325,329,330,333,337,339,341,343,347,349,351,354,356,360,361,363,365,366,368,372,374,378,380,382,385,387,391,394,396,398,401,405,407,409,411,413,415,419,421,425],[187,38,40,242,188,38],"project\u002Fneutral\u002Fexecution",[228,38,38,244,10,32],"maker\u002Fneutral\u002Fexecution",[150,32,43,246,151,38],"project\u002Fpositive\u002Fnone",[231,32,38,248,10,32],"maker\u002Fneutral\u002Fnone",[165,33,40,250,166,38],"project\u002Fmixed\u002Fexecution",[234,33,38,244,10,32],[253,33,40,244,254,38],"43983798","dbbk",[256,33,38,244,10,32],"43984317",[172,40,43,258,173,38],"project\u002Fpositive\u002Fdocs",[260,40,38,261,10,32],"43972818","maker\u002Fneutral\u002Fdocs",[203,40,38,263,204,38],"other\u002Fneutral\u002Fnone",[265,40,38,266,10,32],"43978826","commenter\u002Fneutral\u002Fnone",[191,268,40,242,192,38],4,[270,268,38,244,10,32],"43979059",[105,43,43,272,106,38],"project\u002Fpositive\u002Fdesign",[274,43,38,248,10,32],"43978868",[116,276,43,277,117,38],6,"project\u002Fpositive\u002Fexecution",[279,276,38,261,10,32],"43982137",[101,281,43,282,102,38],7,"project\u002Fpositive\u002Fidea",[284,281,38,266,10,32],"43978879",[286,281,38,263,102,38],"43979203",[288,281,38,266,10,32],"43980707",[290,291,38,263,292,38],"43978425",8,"4m1rk",[294,291,38,266,10,32],"43978763",[180,225,40,296,181,38],"project\u002Fneutral\u002Fidea",[298,225,38,266,299,38],"43975832","edoceo",[301,225,38,263,181,38],"43977956",[303,225,38,263,299,38],"43981010",[305,225,38,263,306,38],"43984109","1oooqooq",[308,225,38,309,10,32],"43978928","maker\u002Fneutral\u002Fidea",[311,31,43,246,312,38],"43977070","drcongo",[314,31,38,248,10,32],"43979031",[221,316,40,296,222,38],11,[57,316,40,296,58,38],[319,316,43,282,222,38],"43975273",[321,316,38,309,10,32],"43979013",[323,316,38,263,324,38],"43975330","christoff12",[326,327,40,242,328,38],"43975035",12,"diiiimaaaa",[84,327,38,244,10,32],[331,327,43,277,332,38],"43982163","strzibny",[334,335,43,246,336,38],"44000542",13,"r0fl",[338,335,38,248,10,32],"44001784",[210,17,40,340,211,38],"project\u002Fneutral\u002Fnone",[342,17,38,263,10,32],"43978940",[344,345,43,272,346,38],"43980972",15,"hamish-b",[348,345,38,248,10,32],"43981117",[350,345,38,266,346,38],"43984031",[142,352,32,353,143,38],16,"project\u002Fcritical\u002Fexecution",[355,352,38,244,10,32],"43978989",[357,358,43,282,359,38],"43977122",17,"diordiderot",[72,358,38,248,10,32],[157,362,40,242,158,38],18,[364,362,38,244,10,32],"43978936",[109,30,43,246,110,38],[367,30,38,266,10,32],"43978945",[369,370,43,246,371,38],"43975587",20,"tegdude",[373,370,38,248,10,32],"43978995",[375,376,43,246,377,38],"43976709",21,"urbanisierung",[379,376,38,248,10,32],"43978992",[132,381,32,353,133,38],22,[383,381,38,266,384,38],"43974282","revskill",[136,381,40,386,125,38],"project\u002Fneutral\u002Fdesign",[388,381,38,389,390,38],"43975592","commenter\u002Fcritical\u002Fnone","7bit",[392,381,38,393,10,32],"43979027","commenter\u002Fneutral\u002Fdesign",[395,381,38,389,390,38],"43991496",[397,381,38,272,10,32],"43974283",[399,381,43,272,400,38],"43975359","yawnxyz",[402,403,43,246,404,38],"43979410",23,"akka47",[406,403,38,266,10,32],"44001788",[120,408,43,246,121,38],24,[410,408,38,266,10,32],"43978990",[124,412,43,246,125,38],25,[414,412,38,266,10,32],"43979054",[416,417,43,246,418,38],"43975781",26,"jacktheturtle",[420,417,38,266,10,32],"43979052",[422,423,38,263,424,38],"43975368",27,"zeroq",[426,423,38,263,10,32],"43979050",[],[429,433,438,443,448,453],{"id":430,"name":431,"points":432,"category":19},"43935394","Hyvector",331,{"id":434,"name":435,"points":436,"category":437},"43928118","qtap",259,"infrastructure",{"id":439,"name":440,"points":441,"category":442},"43975423","HelixDB",237,"data",{"id":444,"name":445,"points":446,"category":447},"43988381","Muscle-Mem",226,"ai",{"id":449,"name":450,"points":451,"category":452},"43936097","Aberdeen",224,"languages",{"id":454,"name":455,"points":456,"category":447},"43964201","Airweave",176,false,"v2",{"id":460,"name":5,"line":6,"ai":457,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":461,"top":17,"kw":462,"maker":10,"domain":463,"tier":18,"attempts":38,"strip":464,"url":-1,"mix":465,"praise":97,"objection":129,"sub":20},43971688,0.48,[23,24,25,26],"","3533503555003000535355351503555130555550",[30,31,32,33],1793991119979]