Comment by parhamn

You can get a lot closer with only small modifications:

    input[type="radio"] {
      appearance: none;
      margin: 0;
      width: 25px;
      height: 25px;
      background: white;
      border-radius: 50%;
      display: inline-grid;
      place-content: center;
      box-shadow: 0 2px 10px color(display-p3 0 0 0/0.5);

      &::before {
        content: "";
        width: 11px;
        height: 11px;
        border-radius: 50%;
      }

      &:checked::before {
        background: color(display-p3 0.383 0.317 0.702);
      }
    }

Here's a link to a codepen so you can see what it looks like without rendering it yourself: https://codepen.io/erikaja/pen/RNRVMyB

> How doable is it with vanilla css?

Under all of the framework complexity that specific look is still achieved with CSS. In fact, you could rip out the CSS they use with very little modification and pair it with a ~five-line React component that doesn't require any third-party imports.

Fun exercise! https://codepen.io/mcintyre94/pen/pvbPVrP

Everything in styles.css in that example maps to the vanilla input, so you just have to move them around a bit. Should work at least as well as theirs across browsers, because it's vanilla inputs and the same CSS.

Where do you draw the line tho? How many kilobytes and how much future maintenance work is avoiding a potential slight visual inconsistency with a radio button worth? Is it worth to lose the x amount of people who have bad network connection?

Use this approach everywhere and the actual content of the page (you know: the stuff people came for) suffers.

All I can think about is a quote by world famous video artist Nam June Paik: When to perfect, Gott böse ("God gets mad when too perfect", the original isn't exactly a full sentence and mixes English and German).

  > - Make sure it looks the exact same across all browsers
  > How doable is it with vanilla css? 

It's not doable with your fancy frontend framework and your 20 imports and your ten thousand lines of typescript.

"Make sure it looks the exact same across all browsers" is, and always has been, fundamentally at odds with how the web is intended to work.

How well does this shadcn crap render in arachne? ladybird? netsurf? links? dillo? netscape 3? The latest version of chrome with user styles applied?

When you say "exactly the same", I assume you mean that the design only uses black and white, because some people might have black and white monitors, right? But you're also going to use amber-on-black because some people might have amber screen monitors, right? How do you plan on ensuring it looks exactly the same on a braille terminal?

Maybe you think I'm being silly. Because nobody uses monochrome monitors in 2026, right? So it's safe to ignore that and put an asterisk next to "exactly the same" (And also just forget that e-ink is a thing that exists).

(Just like how it was safe in 2006 to assume people would always have 800x600 or bigger displays, and nobody would ever come along using a screen with, say, 480×320 resolution)

What measures have you taken to ensure that your colours appear exactly the same across a bunch of different types/brands of monitors that render colours differently? Or, perhaps we should just add another asterisk next to "exactly the same"?

I could go on.

How many asterisks is acceptable before "exactly the same" isn't a thing anymore?

If "exactly the same on all browsers" is one of your goals, you are wrong. If your designer tells you that's what they want, they are wrong. If you ever tell a client that's what you're providing, you are wrong.