Shadcn/ui without the React (Part 2)
Published on: Sat Apr 19 2025
Introduction
After having worked on giving DaisyUI the same feel as shadcn/ui in Part 1 and discovering FrankenUI, it seemed that I finally found my ideal UI component library to start building shadcn/ui level interfaces without React. Unfortunately I keep coming back to DaisyUI for a variety of reasons (mostly for components & more likely to have future support). So back to the drawing board: how do we make a more complete DaisyUI theme that feels like shadcn/ui?
The Plan
From here we will take a different approach, than before. Ultimately we will go component by component and see how well the two collections map onto each other. But first we will go into a bit more theory. In part 1, I mentioned that the list of css variables, that both libraries use, do vary quite a bit in a couple of places, so we will also have to make a choice how to handle this.
The first step is to figure out how to map the css variables onto each other. Are there variables that we need and need to implement across DaisyUI to make it work? Do we need a script that converts one theme to the other? How far would we get with the default DaisyUI variables? We will have to tackle all of these questions to even get started.
It is worth to mention, that it would be a big win to make the shadcn/ui css variables fully compatible with DaisyUI. Then we could think about taking advantage of tools like tweakcn, an amazing theme builder for shadcn/ui.
Key Differences
CSS Variables
- css variables
Components
So what do we do with the components, that are not available? Aspect Ratio ->
I want Code!
Ok, ok, here we go.