AgnosticUI

AgnosticUI - Local Components for React, Vue, Svelte & More The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

𝗗𝗶𝘀𝗰𝗼𝘃𝗲𝗿𝘆 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱 for React, Vue, and Lit

One implementation. 100% framework consistency.
→ Token-driven UI
→ 15+ "One-Class" Skins
→ Light/Dark variants included

www.agnosticui.com/playbooks/da...

#DesignSystems #Frontend #WebDev#CSS

Bluesky
New AgnosticUI playbook: Multi-step onboarding wizard
React, Vue, Lit implementations. Timeline tracking. Includes LLM prompts for customization.
Features new SelectionButtonGroup and SelectionCardGroup components.
agnosticui.com/playbooks/onboarding.html

Yeah, it's an interesting progressive approach. Thanks for sharing your thoughts.

I agree and it's why I called mine AgnosticUI 😀 It IS fun when you get to npm install your own thingies you built in previous years no doubt!

As you know I'm a fan. How'd you end up with 100ms delay specifically? Does this work equally well on a page with 10 WCs vs. one with say 100 WCs?

AgnosticUI - Local Components for React, Vue, Svelte & More The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

Docs:
• agnosticui.com/components/selection-button-group.html
• agnosticui.com/components/selection-card-group.html

AgnosticUI Docs Show SelectionButtonGroup component

🚀 New in AgnosticUI: SelectionButtonGroup & SelectionCardGroup

Just shipped two components while building our Onboarding Playbook!

✨ SelectionButtonGroup
Compact button-styled radio/checkbox

✨ SelectionCardGroup
Rich card-based selection

#WebDev #React #Vue #Svelte #WebComponents #OpenSource

I’d love to hear that episode. I’m pretty sure yours was the articles I read re how to go about SSR and also FOUC circumnavigation in web components yes? Um, those would be amazing topics in my ear holes 😁 cc @stuffbreaker.bsky.social @shoptalkshow.com

AgnosticUI - Local Components for React, Vue, Svelte & More The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

Most AI-generated UI defaults to React + shadcn + Tailwind 😴

I used AgnosticUI to test if an LLM has the capability to respect a design system's constraints to generate bespoke pages:

Login Playbook + prompts are public if you care about repeatable AI UI output:
www.agnosticui.com/playbooks/lo...

AgnosticUI's new Responsive Login Playbook — screenshot image capture of how it looks at the Tablet size.

AgnosticUI major update live! 🚀

Login Playbook: AI recipes for React, Vue & Lit.
Buttons: Full-width support.
Inputs: Auto-centered addons & standard sizing.
CLI: Automation via --skip-prompts.
Figma: Token variables, 5 components.

www.agnosticui.com/playbooks/lo...

#WebDev #OpenSource #Frontend

Sure, we can do certain things to ensure short term survival (Jr/Sr), but, what about our dignity? This endless chasing relevance is maddening and at a certain point you have to backup and ask: How does this whole arrangement REALLY play out when the overall energy appears to be "remove the humans".

Addy, ALWAYS appreciate you man! But, something feels oversimplified. Elephant in room is many folks genuinely feel crummy re how powers that be are approaching all this, no?

Survival formula: Adapt. Pivot. Adapt. Pivot. Adapt. Pivot. Get back on hamster wheel. Remember big brother IS your master.

Hey Sarah. Long time! I know you were joking. But. Doesn't that feel wrong? Now we have to dumb down our writing just so folks know we're humans? Feels icky that we're accommodating all this, but, I DO get it. Maybe the Tailwind clobbered by LLMs thing's got me down. I dunno :(

@tolin.ski So I rewrote AgnosticUI in Lit web components and I've definitely contemplated if some tasteful classless, typography defaults, utilities, helpers, etc. should be added in. It's very interesting to see Graffiti. Will have to play with it. Always dug Pico, OpenProps, etc. Synergy opp?

Photoshop (Web) and Spectrum; Microsoft’s Fluent UI and FAST, VS Code; Salesforce Lighting; GitHub’s UI; Shopify
Polaris Design System; USWDS; and Apple, Porsche, SpaceX, Reddit all supposedly too. Seems like there's some pretty serious big hitters using 'em. Sweet spot's primitives & design systems

Looking for some web component guru to compare vitest vs. open-wc/testing. I used the former out of habit with other tech but maybe later is better? Any thoughts?

I never see these sorts of goodies until I've already built like 50+ components lol. Hey, but, I thought I was wrong to use vitest (and not open-wc/testing which I didn't discover until I was too far in). Thoughts comparing the two? I've only been writing web components more seriously in 2025 so...

I rewrote AgnosticUI in Lit web components www.agnosticui.com and I think it's a fairly straight forward implementation if you're looking for source code to read. I'm honestly just diving in more heavily in last 6 months. So, you can see all my mistakes too lol.

I read. Yeah, unsurprisingly, your second to last paragraph. Man. I'm. Like. 100%. Right. There. With. You. My. Brother (yes, obnoxious misuse of periods to make it land lol...because, fuck it, I'm a human after all—and I can use an em dash if I want :p

Yes! I rewrote AgnosticUI from scratch in Lit. 55+ components. New CLI - www.agnosticui.com

Yes! Mine :) I just finished rebuilding AgnosticUI from scratch. 55+ components. New CLI. Feedback, GitHub stars, and help spreading the word would be greatly appreciated if you like it.

🔗 agnosticui.com ⭐ github.com/AgnosticUI/agnosticui

Here's a tip my friend: ::part is from outside ::slotted is from within. Helps me remember at least :) Best of luck

Biggest thing I can think of was realizing a11y is affected so you just have to put your <label for="ID"> in same shadow and you're pretty much off and running imo. Complex super compound component styles can get tricky too.

Microsoft's FAST/Fluent UI, GitHub's github-elements, Shoelace, Salesforce's Lightning, and finally Adobe's use of its Spectrum Web Components library in Photoshop.

And, Chad, I just prerelease v2 rewrite of AgnosticUI www.agnosticui.com -- maybe what you're looking for? Not headless though.

Scott is this basically a combo of classless and CSS utilities (but more like 2+ rules per class)? Noticed .box with background, padding, border-radius, border. Do you have a rationale post? Curious to read if so Btw, I rebuilt AgnosticUI in Lit web components lately (you eval'd v1 a few years back)

What does that mean? Have you tried Lit? What about only using for primitives and import'ing into your framework? I think that's what many people are doing. I went to pains to make my lib (built now in Lit web components) very dUX friendly for React and Vue. Would like to hear what "feel wonky".

I used vitest for my framework rewrite. Wasn't even aware of open-wc/testing until I'd like written 30+ components lol. What does your protected example mean btw?

I rewrote AgnosticUI to use Lit web components. There are a couple simple things that I believe should be up front and center in any intro to web components — 1. get used to placing <label> alongside your implementation in shadow dom 2. CSS parts, ::slotted, etc.

I'm still trying to figure out how to get the word out on my OSS without resorting to just cracking back open my IDE and writing code. I'm so much more comfortable there. Hours of shameless plugs in Discord servers. I feel like a fucking used car salesperson. Necessary evil but I really hate it :(

I completely rewrote AgnosticUI v2 with Lit Web Components

@lit/react wrappers for React DX

Vue wrappers for Vue DX

Direct web components for Svelte, Solid, Angular

Feedback and GH ⭐ welcomed!

🔗 agnosticui.com ⭐ github.com/AgnosticUI/agnosticui

#WebDevelopment #WebComponents #Lit #UiComponents