while reading through the principles it follows I came across https://ui.shadcn.com/docs ( read the principles it follows )

How do I pull upstream updates in an Open Code approach?

This is how shadcn explained it.

shadcn/ui follows a headless component architecture. This means the core of your app can receive fixes by updating your dependencies, for instance, radix-ui or input-otp.

The topmost layer, i.e., the one closest to your design system, is not coupled with the implementation of the library. It stays open for modification.
So what Does this mean?. when there are some updates in the dependency libraries like radix-ui and others which shadcn depends on, and you need to update your dependences, how does this work in the open code approach?
well shadcn says that they follow a headless component architecture, so when the dependencies gets update it wont effect the component code. Lets understand what is this headless component architecture.

I was a noob developer until I learnt what it means 😂, whenever someone asked my what ui library or component library you use, I would say “I MAKE MY OWN COMPONENTS”, i wasn’t aware how deep this sentence meant.
During my first full stack project I built a drop down component which looks nice but…

Screen Recording 2025-08-29 123403.mp4

https://dolist-1.onrender.com/ ( I mean its my first projects and it sucks cuz i hosted it on render)
It lacked so many things:
- It does not show which priority was chosen, for that we need to see at the top left of the input component .
- It lacked accessibility like keyboard navigation and selection, and also it didn't adhere to WAI-ARIA. [ It is a standard guidelines published by the W3C (World Wide Web Consortium), which provide a way to describe the role, state, and properties of elements in a web page ] https://www.w3.org/WAI/standards-guidelines/aria/
- I had used divs to make it, instead of select element.
The thing here was. I wanted to have a customized dropdown, but it should have followed the WAI-ARIA guidelines so that it is accessible by everyone. So isn’t there some way where I can get a ready component which followed the guidelines and gives freedom to style our way?
That’s where Headless components come in.

Headless components

These are the UI components which mainly focus on functionality, state, properties and accessibility and not on styling.
They may have minimal or no styling, and give the developer the freedom to style how ever they want for their design system.
Some examples include:
- Radix primitives ( which shadcn relies on )
- HeadlessUI
- React-aria
- Ariakit
- And many more…