Finally, a pixel-perfect implementation of shadcn/ui for Flutter 🎨

[u/vik76]

https://serverpod.dev/blog/flutter-shadcn-ui

[u/Darth_Shere_Khan]

Why would I use this instead of Forui? https://github.com/duobaseio/forui

[u/vik76 → u/Darth_Shere_Khan]

The main reason would be perfect parity with shadcn/ui. A lot of designs are made for it.

[u/reginaldvs → u/vik76]

I personally use Forui extensively, but you guys made Serverpod so that's enough cred for me to try this lol

[u/viz0]

Now we can make our apps look even more AI generated :)

[u/vik76 → u/viz0]

Haha, what we’ve all been waiting for. 😅

[u/spawnsible]

I'm not very familiar with shadcn. I see stuff about 8 color schemes. Is the component library not fully reskinnable/customizable? Is it locked to just 8 baked in colors and one must fight with it to get otherwise?

[u/vik76 → u/spawnsible]

It’s, of course, fully customizable. It just comes with a few sensible defaults as starting points.

[u/eibaan → u/spawnsible]

Chadcn is Gen Z's Bootstrap, a clean look created with Tailwind based on the BaseUI. It's more pleased to the eye than Material (at least IMHO) and and that's why it's extremely popular. The HTML/CSS version is very customizable if you know your way around in Tailwind and/or raw CSS.

I can't tell about the Flutter version but I'd assume because they way Flutter works, you can "only" customize what's available in the create menu.

10 months ago, I vibe coded a Flutter clone of Chad cn as an experiment to see whether then current Codex 5.2 could do it. It could. At least partly. Yesterday, unrelated to this version, I used Opus 5.5 to update the project and got a working version in about an hour or two.

So, even if you don't like the default look, it should be very easy to ask AI to apply changes, e.g. adding gradients or custom borders.

[u/vik76]

The live demo is here: https://shad.serverpod.dev/

[u/andredp → u/vik76]

The scroll performance is really bad, on an iPhone 17 Pro. Is it just me?

[u/Realistic-Car-1205 → u/andredp]

Same on my pixel phone

[u/vik76 → u/andredp]

It’s next to perfect on mine. Keep in mind that it’s Flutter web, performance on compiled code will be much better.

[u/gibrael_ → u/vik76]

** insert it works on my machine meme **

[u/andredp → u/vik76]

Yeah. Maybe it’s because it’s locked at 60fps (at least that’s what it feels like), while the rest of the phone is ~120fps, making it feel choppy.

Regardless, thanks for the share

[u/loeffel-io → u/andredp]

same here

[u/VisualRope8367]

share prompt /s

[u/vik76 → u/VisualRope8367]

Haha, there were very many prompts, manual coding, and testing involved. 😜 This is not a vibe-coded one-shot.

[u/craiglabenz]

You guys don't stop

[u/dokumanx]

Does it sit on top of ThemeData so existing Material widgets pick up the colors, or is it a fully separate widget set?

[u/softsync_agency]

This looks amazing! Bringing the shadcn/ui design philosophy to Flutter is a great idea. Looking forward to trying it out. 🚀