primitives VS shadcn/ui

While this approach works, I’m sure there are UI libraries that allow for easier and more flexible tooltip styling. However, it feels rewarding to have found a workaround for this. If you're interested in exploring other options, you might want to check out this discussion.

Radix Primitives is a library of unstyled React components built by the team behind Radix UI, a UI library with fully styled and customizable components. According to its website, the Node.js, Vercel, and Supabase teams all use Radix Primitives. The library has 14.8K stars on GitHub.

Fast forward to a week ago, I cloned the Reach UI and Radix UI codebase and started exploring. Large codebases are always difficult to comprehend. With some digging around and reverse engineering, I was able to create the first component listed in the Reach UI docs, the Accordion.

Other things that led me to choose this path were: Most libraries that are ports, official or not, use the original name (e.g. Svelte Material UI); Radix UI's license is fairly permissive (https://github.com/radix-ui/primitives/blob/main/LICENSE), which is why I also don't think it matters that it's a company behind it. Same as why I don't see an issue with the name Preact, for example.

For a react project I recommend https://radix-ui.com, it's got pretty good defaults

radix-ui.com

We'll use React with Vite, shadcn/ui (a collection of reusable components I have been wanting to try for a while), React Hook Form for form management, and Zod for schema-based form validation.

Visit the official Shadcn documentation and browse through the collection of pre-built components. Once you find a component you want, simply copy the provided code and paste it into your project. For example, here's how you can use the Button component:

What’s ShadCN?

So, for making the user experience better I had to look for ways to get it done quick and elegantly, Thats how I Found shadcn.

Tailwind CSS shadcn/ui NextUI Material UI DaisyUI Park UI Aceternity UI

I think this is a good point. As somewhat of a tangent I have vaguely been thinking of the difference between copy pasting and explicitly extending for a bit.

It seems that in many cases, adapting copy pasted code has some benefits over importing and adjusting some library code. https://ui.shadcn.com/ is an example of going the copy paste direction. It seems to me this is preferable when tweaking the exact behaviour is more important than keeping up to date with upstream or adhering to an exact standard. If you customize the behaviour a lot the extra abstraction layer only gets in the way. This insight might be a bit mundane.

import puppeteer from 'puppeteer' const url = 'https://ui.shadcn.com' const browser = await puppeteer.launch() const page = await browser.newPage() // dark mode await page.emulateMediaFeatures([ { name: 'prefers-color-scheme', value: 'dark', }, ]) await page.goto(url, { waitUntil: 'networkidle2', }) const data = await page.screenshot({ fullPage: true }) await browser.close()

Shadcn/ui

ShadCN/UI for elegant UI components and styling