{"id":331,"date":"2025-04-22T13:19:09","date_gmt":"2025-04-22T13:19:09","guid":{"rendered":"https:\/\/redmonk.com\/kholterhoff\/?p=331"},"modified":"2025-04-22T14:42:00","modified_gmt":"2025-04-22T14:42:00","slug":"ui-component-libraries-shadcn-ui-and-the-revenge-of-copypasta","status":"publish","type":"post","link":"https:\/\/redmonk.com\/kholterhoff\/2025\/04\/22\/ui-component-libraries-shadcn-ui-and-the-revenge-of-copypasta\/","title":{"rendered":"UI Component Libraries, shadcn\/ui, and the Revenge of Copypasta"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-332\" src=\"http:\/\/redmonk.com\/kholterhoff\/files\/2025\/04\/giphy.gif\" alt=\"\" width=\"100%\" height=\"270\" \/><br \/>\nShadcn\/ui<span style=\"font-weight: 400;\">\u2014<\/span>a hugely popular open source React UI component library<span style=\"font-weight: 400;\">\u2014<\/span>is a critical piece of frontend infrastructure you\u2019ve never heard of, and AI app developers are taking notice. For folks outside of the frontend and design world, a UI component library is a collection of pre-designed, reusable UI elements (buttons, forms, and navigation bars) that can be used across various projects. The intention of these is to ensure consistency and efficiency in development. With <a href=\"https:\/\/github.com\/shadcn-ui\/ui\">85.5k GitHub stars<\/a>, shadcn has become a dominant force in this market, and in the AI \u201cvibe coding\u201d era it is only positioned to grow. That\u2019s why according to <a href=\"https:\/\/www.tonydinh.ai\/\">Tony Dinh<\/a>, founder of TypingMind and DevUtils, shadcn is the \u201cdefault UI lib of LLMs.\u201d<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">Being the default UI lib of LLMs is incredible \ud83e\udee1 Loving the shadcn components in my latest project.<\/p>\n<p>&mdash; Tony Dinh \ud83c\udfaf (@tdinh_me) <a href=\"https:\/\/twitter.com\/tdinh_me\/status\/1883064193164996859?ref_src=twsrc%5Etfw\">January 25, 2025<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p><a href=\"https:\/\/bolt.new\/~\/bolt-shadcn\">Bolt<\/a>, <a href=\"https:\/\/feedback.lovable.dev\/changelog\/a-new-lovable\">Lovable<\/a>, and Vercel\u2019s <a href=\"https:\/\/ui.shadcn.com\/docs\/v0\">v0<\/a> all build on shadcn. <a href=\"https:\/\/feedback.lovable.dev\/changelog\/a-new-lovable\">Lovable<\/a>\u2019s blog, for instance, announces that \u201cShadcn is now the default design system for new projects.\u201d Shadcn also underlies the UI libraries of devtools including <a href=\"https:\/\/supabase.com\/ui\">Supabase<\/a> and <a href=\"https:\/\/components.lab.auth0.com\/docs\">Auth0<\/a> that are looking to remove friction in connecting these vendors\u2019 backend services to the frontend. When Paul Copplestone, CEO of Supabase, recently <a href=\"https:\/\/x.com\/kiwicopple\/status\/1906717164905635990\">announced<\/a> the creation of Supabase UI Library I reached out to ask why the team chose shadcn. According to Ivan Vasilov, frontend developer at Supabase:<\/p>\n<blockquote><p>The main reason why shadcn approach is a good fit for us is that it transfers the ownership of the code to the user.<\/p>\n<p>if the user wants to customize the Ul, they don&#8217;t have to wait for us to implement className on specific components or add specific props. If we add a new auth option somewhere, the user doesn&#8217;t have to wait for us to support it, they can just change it, it&#8217;s their code.<\/p>\n<p>The previous approach (<a href=\"https:\/\/supabase.com\/docs\/guides\/auth\/auth-helpers\/auth-ui\">https:\/\/supabase.com\/docs\/guides\/auth\/auth-helpers\/auth-ui<\/a>) was deprecated mainly because we owned the code for the UI, so it was an endless wishlist for customizing the Ul and a maintenance burden for us<\/p>\n<p>The part where it&#8217;s becoming a standard for distribution, theming and component API is a huge bonus.<\/p><\/blockquote>\n<p>Lots to chew on in this rationale, which I get into below, but I argue Supabase\u2019s experience around UI libraries points to larger trends in design systems, single page applications, and AI coding.<\/p>\n<p>This post takes a tour through the state of React UI component libraries (sometimes called \u201c<a href=\"https:\/\/news.ycombinator.com\/item?id=43539785\">registries<\/a>\u201d) by not only discussing where these tools came from, but we will also take a look at how new AI-powered frontend tools are shaking things up. We\u2019ll cover a bit of history, poke fun at the never-ending quest for the perfect UI component solution, and hopefully get a clearer picture of why UI libraries continue to matter.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">It was so fun working on the blocks, we had to research every little shadcn did in his library: How do you do hooks? How do you make the file install in the right place?<\/p>\n<p>shadcn\/ui is a great library. I can&#39;t wait for it to become the lingua franca for distributing UI components. <a href=\"https:\/\/t.co\/fJikGVcGaK\">https:\/\/t.co\/fJikGVcGaK<\/a><\/p>\n<p>&mdash; Ivan Vasilov (@ivasilov) <a href=\"https:\/\/twitter.com\/ivasilov\/status\/1906740762533838943?ref_src=twsrc%5Etfw\">March 31, 2025<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>&nbsp;<\/p>\n<h2>Taxonomy of UI Component Library Types<\/h2>\n<p>Before discussing how we arrived at the shadcn era, let\u2019s lay out the types of UI component libraries available today, the developer needs each one fills, and examples:<\/p>\n<ul>\n<li><b>Headless: <\/b>Provides reusable, unstyled components with a strong emphasis on accessibility and functionality. Headless libraries often include accessibility features and focus on the underlying structure and behavior of components, while unstyled libraries may or may not prioritize accessibility and may be focused more on offering a foundation for building custom UI elements. (Adobe\u2019s <a href=\"https:\/\/react-spectrum.adobe.com\/react-aria\/index.html\">React Aria<\/a>, WorkOS\u2019s <a href=\"https:\/\/www.radix-ui.com\/primitives\">Radix primitives<\/a>, Tailwind\u2019s <a href=\"https:\/\/headlessui.com\/\">Headless UI<\/a>, <a href=\"https:\/\/github.com\/downshift-js\/downshift\">Downshift<\/a>)<\/li>\n<\/ul>\n<ol>\n<li style=\"font-weight: 400;\"><b>Unstyled:<\/b> A general unstyled component library is simply one that lacks predefined styles, allowing developers complete control over the visual presentation. It offers basic building blocks or primitives that offer the essential behavior and layout of UI components without any built-in styling. (<a href=\"https:\/\/mui.com\/material-ui\/?srsltid=AfmBOoqaCe8hhpxDFO4IA_wmjP_1NgqAA1K4zdC8HhSmucY1K-sq7waC\">Material UI\/ MUI<\/a> [created by Google], <a href=\"https:\/\/react-bootstrap.netlify.app\/\">React Bootstrap<\/a>, <a href=\"https:\/\/shoelace.style\/\">Shoelace<\/a>, <a href=\"https:\/\/open-dash.com\/\">Open-Dash<\/a>, <a href=\"https:\/\/open-ui.org\/\">Open UI<\/a>, <a href=\"https:\/\/base-ui.com\/\">Base UI<\/a>, <a href=\"http:\/\/notyf\">notyf<\/a>)<\/li>\n<li style=\"font-weight: 400;\"><b>Styled UI:<\/b> A set of pre-built UI components with built-in, although often customizable, styling that enables developers to rapidly create interfaces with a uniform visual appearance out of the box. (<a href=\"https:\/\/ui.shadcn.com\/\">shadcn<\/a>, <a href=\"https:\/\/tailwindcss.com\/plus\/ui-blocks\">Tailwind Plus<\/a>, <a href=\"https:\/\/react-spectrum.adobe.com\/react-aria\/getting-started.html#starter-kits\">React Aria starter Kit<\/a> [for Tailwind or Vanilla JS], <a href=\"https:\/\/www.melt-ui.com\/\">Melt UI<\/a> [for Svelte], <a href=\"https:\/\/chakra-ui.com\/\">Chakra UI<\/a> [for Next.js RSC], <a href=\"https:\/\/ant.design\/\">Ant Design<\/a>, <a href=\"https:\/\/mantine.dev\/\">Mantine<\/a>)<\/li>\n<li style=\"font-weight: 400;\"><b>Full UI Kits:<\/b> Developer-friendly reusable UI components, templates, styles, and other digital assets. (<a href=\"https:\/\/framesxdesign.com\/\">Frames X<\/a>, <a href=\"https:\/\/www.untitledui.com\/\">UntitledUI<\/a>, <a href=\"https:\/\/www.disy.design\/\">Disy Design System<\/a>, <a href=\"https:\/\/cabanaui.com\/\">Cabana<\/a>, <a href=\"https:\/\/flowbite.com\/\">FlowBite<\/a>, <a href=\"https:\/\/catalyst.tailwindui.com\/\">Tailwind Catalyst<\/a>)<\/li>\n<li style=\"font-weight: 400;\"><b>Design Systems with UI Components<\/b>: Company-specific design systems often contain UI components. (Google\u2019s <a href=\"https:\/\/m3.material.io\/\">Material Design<\/a>, AWS\u2019s <a href=\"https:\/\/cloudscape.design\/\">Cloudscape<\/a>, Adobe\u2019s <a href=\"https:\/\/spectrum.adobe.com\/\">Spectrum<\/a>, Microsoft\u2019s <a href=\"https:\/\/fluent2.microsoft.design\/\">Fluent<\/a>, IBM\u2019s <a href=\"https:\/\/carbondesignsystem.com\/\">Carbon<\/a>, Salesforce <a href=\"https:\/\/www.lightningdesignsystem.com\/\">Lightning<\/a>)<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>History of Unstyled React UI Libraries &amp; Design Systems<\/h2>\n<p>To appreciate the current UI component library landscape, it helps to know how we ended up with so many React UI solutions in the first place. In the early days of React (circa 2013-2015), developers were coming off years of using general web UI toolkits like Twitter Bootstrap (the OG CSS framework) and jQuery UI. While the JQuery library handled DOM manipulation and event handling, Bootstrap emerged from the need to make websites responsive on different screen sizes and browser types. React was all about components, which are reusable and self-contained pieces of code that define a part of the user interface. However, because Facebook\/Meta failed to provide an official React component library, the community had to step in to build them.<\/p>\n<p>Material-UI (MUI) was one of the first big React component libraries, bringing Google\u2019s Material Design components to React. Launched in <a href=\"https:\/\/mui.com\/material-ui\/getting-started\/\">2014<\/a>, it quickly became popular for its comprehensive set of pre-styled components and cohesive design. Many React apps in the late 2010s had an unmistakable Material look thanks to MUI (and yes, many still do). That\u2019s because MUI is notoriously difficult to customize. This emphasis on consistency and productivity was both a boon and curse. Using them meant you didn\u2019t have to reinvent the dropdown or datepicker every time, but every dropdown or datepicker looks identical.<\/p>\n<p>Other early players like Ant Design (from Alibaba\u2019s Ant Financial), <a href=\"https:\/\/react.semantic-ui.com\/\">Semantic UI React<\/a>, and Palantir\u2019s <a href=\"https:\/\/blueprintjs.com\/\">Blueprint<\/a> also gave developers ready-made components to speed up development and make interactions and visual experiences more reliable. In 2017, the Palantir blog <a href=\"https:\/\/blog.palantir.com\/scaling-product-design-with-blueprint-25492827bb4a\">reflects<\/a> on the problems that motivated its design team to create Blueprint:<\/p>\n<blockquote><p>Our work was siloed: platform teams were not leveraging each other\u2019s work, forward-deployed engineers built one-off solutions, and our designers and product engineers often ended up reinventing the wheel. As a result, our ecosystem of applications lacked a cohesive user experience, inefficiencies slowed us down, and the quality of our work suffered.<\/p><\/blockquote>\n<p>By the late 2010s, nearly every company with a sizable frontend React team was either using a third party UI library or building their own internal design system that also typically have component libraries (Google\u2019s Material Design, AWS\u2019s Cloudscape, Adobe\u2019s Spectrum, Microsoft\u2019s Fluent, IBM\u2019s Carbon, Salesforce\u2019s Lightning). This era was all about themes and customization APIs\u2013libraries like MUI, Ant, Chakra UI, and Semantic UI, offered theming options to let you at least swap colors and fonts to match your brand. The benefits were clear: speed, consistency, and not having to be a CSS guru to get a decent-looking app with the additional benefits of accessibility and community support.<\/p>\n<p>&nbsp;<\/p>\n<h2>History of CSS Frameworks &amp; Headless UI Libraries<\/h2>\n<p>It is important to note that UI component libraries were not the only way frontend engineers took advantage of out-of-the-box styles. In 2019, <a href=\"https:\/\/www.linkedin.com\/in\/adam-wathan-9418984a\/\">Adam Wathan<\/a>, <a href=\"https:\/\/reinink.ca\/\">Jonathan Reinink<\/a>, <a href=\"https:\/\/www.linkedin.com\/in\/heyhemp\/\">David Hemphill<\/a>, and <a href=\"https:\/\/www.steveschoger.com\/\">Steve Schoger<\/a> released the Tailwind CSS framework. The idea was that instead of pre-made components, Tailwind provided low-level CSS classes to design anything by composing tiny classes. This was a paradigm shift. What Tailwind provides is the lower level customizability that developers missed with MUI. In the past five years, Tailwind has amassed a devoted fanbase, with the <a href=\"https:\/\/www.reddit.com\/r\/tailwindcss\/\">r\/tailwindcss<\/a> subreddit boasting 33k members. Tailwind enthusiasts love the control it offers while eliminating the context-switching of jumping between CSS and JSX because you can do it all in your markup. But Tailwind also has critics. <a href=\"https:\/\/www.spicyweb.dev\/about\">Jared White<\/a>, a web developer, complains that it generates \u201c<a href=\"https:\/\/www.spicyweb.dev\/why-tailwind-isnt-for-me\/#reason-1-tailwind-promotes-ugly-ass-html\">ugly-ass HTML<\/a>,\u201d and, similarly, Hacker News user <a href=\"https:\/\/news.ycombinator.com\/item?id=39140833\">dbbk<\/a> calls it a:<\/p>\n<blockquote><p>hellish nightmare, horizontal reading, proprietary syntax, no selector targeting of other components<\/p><\/blockquote>\n<p>As with most things in devtooling, it really comes down to preference. But the rise of Tailwind CSS and similar approaches signals a need within the community for improved control. This demand led to \u201cheadless\u201d component libraries that provide functionality and structure (for instance, HTML + ARIA for accessibility), while leaving the styling up to the developers. Unsurprisingly, considering its provenance, Tailwind\u2019s Headless UI (<a href=\"https:\/\/github.com\/tailwindlabs\/headlessui\">27.2k GitHub stars<\/a>) is among the most popular of these approaches, compared to Radix primitives (<a href=\"https:\/\/github.com\/radix-ui\/primitives\">16.9k GitHub stars<\/a>), Adobe\u2019s React Aria (<a href=\"https:\/\/github.com\/adobe\/react-spectrum\">13.8k GitHub stars<\/a>), and Downshift (<a href=\"https:\/\/github.com\/downshift-js\/downshift\">12.2k GitHub stars<\/a>). All endeavor to hit the sweet spot of accessible, battle-tested component logic (dialogs, menus, etc.), while also bringing your own styles via CSS or a utility framework like Tailwind. At their core, headless UI component libraries cater to teams that want to build a unique design system without coding every component from scratch. The advantage is to avoid becoming locked into Material Design or any preset aesthetic by adopting the skeleton, and you fleshing out the styles.<\/p>\n<p>Recently, a new approach to UI component libraries has emerged, shifting the focus from mere \u2018control\u2019 to a deeper sense of \u2018ownership\u2019\u2014a quality highly valued by both developers and vendors.<\/p>\n<p>&nbsp;<\/p>\n<h2>Shadcn UI: Design System as Code<\/h2>\n<p>In 2023, a project called shadcn\/ui created by shadcn, currently a <a href=\"https:\/\/x.com\/shadcn\/status\/1688945578439499776\">design engineer at Vercel,<\/a> took the React world by storm. Instead of publishing a package of components to npm, shadcn\/ui provides a website and CLI that lets you choose components and add the source code into your project. It\u2019s like copying snippets from StackOverflow, except those snippets are your whole design system. Shadcn\u2019s components are built on Radix UI primitives for accessibility and use Tailwind CSS for styling. Essentially, shadcn\/ui gave developers a beautifully designed starting point with full code ownership. Once you add it, it\u2019s your code to tweak.<\/p>\n<p>Shadcn uniquely allows users to copy the code directly into their own repositories. This approach flips the script on traditional libraries, which are typically installed via npm and contain pre-built components that you can use via imports. Updates come from the package maintainer meaning that you override or theme by way of provided APIs, but you don\u2019t usually fork and edit the library\u2019s internal code. Sure, this means that developers using shadcn are on the hook to maintain this code, but it eliminates the heaviness and complexity of dependency bloat.<\/p>\n<p>So why has shadcn been so wildly popular? Opinions are rampant, but tend to focus on the idea of code ownership. <a href=\"https:\/\/manupa.dev\/blog\/anatomy-of-shadcn-ui\">According<\/a> to <a href=\"https:\/\/github.com\/ManupaDev\">Manupa Samarawickrama<\/a>, a web developer and blogger:<\/p>\n<blockquote><p>In essence, shadcn\/ui is not just another component library but a mechanism to declare a design system as code.<\/p><\/blockquote>\n<p>The \u201cas Code\u201d movement, which includes <a href=\"https:\/\/en.wikipedia.org\/wiki\/Infrastructure_as_code\">Infrastructure as Code (IaC)<\/a> and <a href=\"https:\/\/www.writethedocs.org\/guide\/docs-as-code\/\">Docs as Code<\/a>, emerged because practitioners want to design, build, and deploy applications by following established software best practices (versioning, provisioning, testing). Because UI components are fiddly, developers see the decoupling of style from implementation that shadcn offers as an advantage. As Samarawickrama <a href=\"https:\/\/manupa.dev\/blog\/anatomy-of-shadcn-ui\">explains<\/a>:<\/p>\n<blockquote><p>Building custom components is usually not difficult to implement at the surface level using modern UI frameworks. But most of the time these implementations of custom components tend to overlook some very important aspects of the behavior of a UI component. This includes behaviors such as focus\/blur state awareness, keyboard navigation and adhering to WAI-ARIA design principles. Even though behaviors are very important to enable accessibility in our user interfaces, getting these behaviors right according to W3C specifications is a really hard task and could significantly slow down product development.<\/p><\/blockquote>\n<p>Like the advantages of headless UI libraries, what shadcn does is ensure the uniform, performant interactive frontend designs. Theo builds on this idea of shadcn supporting \u201cdesign system as code\u201d when he suggests that it effectively bridges design paradigms for modern CSS Solutions which include what he terms:<\/p>\n<ol>\n<li style=\"font-weight: 400;\">CSS++: solutions that extend CSS, (shadcn is built on Tailwind)<\/li>\n<li style=\"font-weight: 400;\">Behavior Libraries: solutions that provide needed behaviors like accessibility and browser support (shadcn is built with Radix)<\/li>\n<li style=\"font-weight: 400;\">Style Systems: pre-built styles (shadcn offers styled components)<\/li>\n<\/ol>\n<p><iframe loading=\"lazy\" title=\"How Shadcn\/ui ACTUALLY Works\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/AqmMx_JidGo?start=170&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>In short, shadcn\/ui redefines how developers think about component libraries by putting control and responsibility back in their hands. By combining accessible behavior primitives, utility-first styling, and full code ownership, it aligns perfectly with the growing \u201cas Code\u201d movement. Rather than abstracting design systems away, it embeds them directly into your project in a manner that is flexible, inspectable, and entirely yours.<\/p>\n<p>&nbsp;<\/p>\n<h2>AI &amp; The Future of UI Component Libraries<\/h2>\n<p>Today UI component libraries offer a convenient shortcut to a decent UI without hiring a dedicated design team. They have become so important to frontend development that some engineers claim to base their entire choice of framework upon component library support. As one Reddit user <a href=\"https:\/\/www.reddit.com\/r\/reactjs\/comments\/18rylr3\/comment\/kf51g35\">explains<\/a>:<\/p>\n<blockquote><p>The only reason I still use React over Svelte is because of how good Mantine is<\/p><\/blockquote>\n<p>This is huge. For the trade-off of taking advantage of effective, pre-built UI components, developers are willing to forego a JS framework they prefer. While in a sense this Reddit user\u2019s declaration echoes conventional wisdom about the importance developers place on integrations, ecosystems, and community, it simultaneously advances my ongoing claims about the <a href=\"https:\/\/redmonk.com\/kholterhoff\/2024\/02\/15\/frontend-developers-the-newest-new-kingmakers\/\">Frontend Kingmaker<\/a>. Frontend engineers<span style=\"font-weight: 400;\">\u2014<\/span>inclusive of JavaScript developers, designers, and UX<span style=\"font-weight: 400;\">\u2014<\/span>are now making architectural and purchasing decisions that will impact all layers of the stack.<\/p>\n<p>As the importance of LLMs to software engineering accelerates and expands, the place of UI component libraries will become even more ensconced. Component libraries are a boilerplate and abstraction, and this is precisely the type of thing nonprofessional \u201cvibe coders\u201d need to get up and running quickly. Why are AI + shadcn an especially compelling pair? Because developers using shadcn have all the code, they can ask AI code assistants (GitHub Copilot, Cursor, Augment Code) leveraging any model (Claude, ChatGPT, Gemini, Llama) to refactor or customize components. I already mentioned that Bolt, Lovable, and Vercel\u2019s v0 all build using shadcn, but this is just the tip of the iceberg. It is also worth mentioning that Convex provides <a href=\"https:\/\/www.convex.dev\/templates?tags=shadcn\">templates<\/a> leveraging shadcn, while Replit <a href=\"https:\/\/replit.com\/@IroncladDev\/ShadCN-UI-Boilerplate#README.md\">offers<\/a> a shadcn UI boilerplate. <a href=\"https:\/\/docs.devin.ai\/product-guides\/deployment-capabilities\">Devin\u2019s docs<\/a> also share that:<\/p>\n<blockquote><p>Devin can deploy frontend applications using a pre-configured template that uses Vite, TypeScript, Tailwind CSS, and Shadcn.<\/p><\/blockquote>\n<p>In other words, shadcn\u2019s code-first approach, which is transparent, flexible, and ready to be shaped by any model you throw at it, makes it well suited for AI-assisted development.<\/p>\n<p>One thing that does concern me about our shadcn-enabled future, is the seemingly diminishing role of design teams it seems to herald. It\u2019s no secret that developers and devtool vendors sometimes seem to have an aversion to hiring actual designers. In our age of lean startups this makes some sense, but there is a real danger to eliminating human designers entirely. Gutting UX and design teams will not only doom our apps to an ugly, one-size-fits-all appearance, it also stymies innovation. As Hacker News user <a href=\"https:\/\/news.ycombinator.com\/item?id=43542734\">notes<\/a>:<\/p>\n<blockquote><p>the developer in me, who realizes how bad we are at design realizes shadcn\/ui is terrible for 99% of people using it. They don&#8217;t have a design system, don&#8217;t know what that even means, and their sinful hands should not be tweaking any UI libraries, at most being limited to modifying a rich set of theme tokens that force consistency&#8230; not touching individual components or copying in random cruft with hard coded gaps between elements.<\/p><\/blockquote>\n<p>Amen; sinner (it\u2019s me) roundly admonished.<\/p>\n<p>To wrap up, the React UI component library landscape in 2025 is rich and moving fast. We\u2019ve evolved from the \u201cgrab Bootstrap and call it a day\u201d approach to a sprawling, nuanced field where developers choose from a palette of options: fully-featured libraries like MUI, headless kits like Radix, copy-and-own solutions like shadcn for ultimate control, and now AI assistants to glue it all together. I, for one, fully expect this space to continue growing rapidly. Perhaps the next big thing will be AI-generated design systems (not just components) or some breakthrough in how we share and distribute UI code. Maybe React 20 will include a standard library of components. I&#8217;ll leave predictions for a future post, but in the meantime I can confidently say we are living in the shadcn era.<\/p>\n<p><b>Disclaimer: <\/b>IBM, Google, GitHub, Amazon, Microsoft, and Salesforce are all RedMonk clients.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shadcn\/ui\u2014a hugely popular open source React UI component library\u2014is a critical piece of frontend infrastructure you\u2019ve never heard of, and AI app developers are taking notice. For folks outside of the frontend and design world, a UI component library is a collection of pre-designed, reusable UI elements (buttons, forms, and navigation bars) that can be<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[32,9,8,7],"tags":[],"class_list":["post-331","post","type-post","status-publish","format-standard","hentry","category-ai","category-design","category-frontend","category-js-frameworks"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":0,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts\/331\/revisions"}],"wp:attachment":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/media?parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/categories?post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/tags?post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}