🤯 Are You Ready For The Component Revolution?

With a single diagram, ShadCN, the author of the ShadCN UI library, has changed:

• how granular code libraries can (and should) go,

• how code can be shared, and who owns it

• and how I think about open source web development.

It's scary. But I'm all here for it.

You see, ShadCN's CLI now supports using external registries to add components. We're used to adding libraries as a unit via our package managers (npm, yarn, etc.) into our "node_modules" directory. But now we can share and install components and copy them directly into our code using:

npx shadcn add <...>

This has the potential to change everything - how we structure code, how we share it, how we think about it:

• Components can (and should) be designed atomically, not with interdependencies built-in

• Components are shared not by installing them into a (for all intents and purposes) read-only folder but by copying them into your code so you can edit them as you like

• "Components" doesn't just mean UI components: "You can already add routes, config files, CSS variables and tailwind configuration with the CLI." wrote ShadCN

v0 (and AI generation in general) probably played a big role in this mindset shift, as it uses this "copy-paste" type of setup.

And you know what? Thinking in atomic components will probably help build better code. With clearer boundaries, better definition of responsibilities and better testing.

It does raise some questions, such as:

• how do we manage component updates if the code we're updating has been changed?

• how do we manage more complex components (organisms vs atoms, to use design system parlance)?

• how do we manage conflicts between components?

But for now, the main question is: How can I get this working in practice? 😆

Found on the web

Tailwind skeletons

Generating a loading state in React (using Suspense boundaries) makes it feel like we’re recreating the same components twice. And there isn’t any added value or creativity there. This means it can be automated, which is where the “Tailwind Skeleton Generator” steps in.

Supermaven joins Cursor

The AI IDE wars are already reaching the consolidation phase, it would seem. Supermaven, a GitHub Copilot alternative, has just announced that they are joining forces with Cursor, the AI-driven VS code fork. (Or, perhaps more specifically, Cursor has acquired them). The announcement echoes the rationale behind the forking of VS Code by the Cursor team: AI capabilities require deep integration within the IDE, and VS Code extensions just don’t give you that reach.

You might be interested in

React Email + Resend in NextJS

This week, we took a look at why email programming is such a mess, how React Email helps solve the problem, and how to integrate it into Next JS with Resend

How to write a useful ticket

That’s all folks

Thanks for getting all the way down here. Feel free to let me know what you thought of all this newsletter issue so I can better meet your needs!

David from Kodaps