Luis Llanes

A @shadcn.com
theme inspired by T3 chat
was due, so I did it!
Do you approve @t3.gg?

Check it out: themux.vercel.app

Pretty (and fully functional) on mobile too btw!

Update on my theme customizer, now it:
✅ Supports Tailwind v4 and v3
✅ Supports oklch, hsl, rgb and hex
✅ Allows user to paste their primary color as a starting point
✅ Provides surface presets (background, card, popover, etc)
✅ Let’s the user sync light and dark mode
✅ Token color picker
#shadcn

Thank you so much, it means a lot!! Fun features coming soon;)

github.com/llanesluis/t...
themux.vercel.app

For the last 2 weeks I’ve been building a shadcn/ui theme customizer that supports Tailwind V4. For my pleasant surprise, I just found out that @shadcn.com is building the official one!!
I took lots of inspo from the V3 one, I’d be happy to share what I’ve done:D

#shadcn/ui #tailwind4

A shadcn/ui theme generator that works with Tailwind CSS version 4

The tool provides presets, and soon you’ll be able to create your own themes

The generated code is ready to be copied and pasted into your css file, providing color variables in `oklch`

There’s a page containing *most* of shadcn/ui components to showcase the styles applied

🎨 shadcn/ui + Tailwind CSS v4 theme generator

✅ Default shadcn presets using Tailwind v4
✅ Custom presets and radius
✅ All shadcn components showcase
✅ Just copy and paste to your css file

📋Soon:
- Allow the user to make their own theme
- Fonts playground

themux.vercel.app
#shadcn #tailwindcss

I haven’t made the switch yet but I’ve heard their docs have links to YouTube videos

{ !!array.length && … }
Works since React skips *false* and nullish values when rendering

IMO you should give 3 a chance and see how it does

How many of them mentioned your favorite actresses? :o

Spanish:

> Aprende a crear interacciones únicas y detalles encantadores con la magia de CSS, JavaScript, SVG y Canvas.
>
> ¡Aquí comparto todos mis trucos!

This version shows the *intention* and sounds *natural*, also *neutral* across all Spanish dialects ;)

When we say "React compares the Virtual DOM to the Real DOM to make only the necessary changes…", are talking about the *Current Fiber Tree* (representing the Real DOM snapshot) and the *WorkInProgress Fiber Tree* (representing the Virtual DOM snapshot, which means React Element Tree snapshot) ??

I’m glad I found your content! I like understanding how my tools *work* under the hood.

Understanding React Server Components | Tony Alicea A deep dive into the internals of React and NextJS to understand RSCs.

I can’t tell how good this article is!
I’m not even half way done with it and it already clarified so many things, I’m blown away. @tonyalicea.dev thanks!

tonyalicea.dev/blog/underst...

I had an issue once where the JavaScript interpreter couldn’t tell it was an IIFE (without assigning the result to a variable), just because I wasn’t using semicolons :/

In these cases you could:
1. Write semicolons
2. Write “void” before the IIFE
3. Not use IIFEs lol

Is it using Tailwind 4? Have you tried it yet? Hopefully it comes out soon

Don’t know what hurts my eyes more: the light theme or that many props lol

Works perfectly and out of the box if you have shadcn and next-themes set up

It’s using:
> Next.js
> next-themes
> TailwindCSS
> lucide-react icons
> next/dynamic API to disable SSR

Showcase of the devtool, it shows the screen size, the current screen breakpoint and the active theme, allowing you to change the theme easily. It makes building responsive websites so much easier!

I built this silly devtool and it’s been SO useful when building responsive websites

- just render it on the Root Layout
- does not ship to production bundle
- runs client side only to avoid hydration errors due to ‘window’
- can be hidden when it’s being annoying

github.com/llanesluis/t...

A couple days in and I’ve help many people already! 🥲

Few things are better for your career than being known as a helpful person

Dynamic APIs in Next.js 15 now require to be awaited since they’re now Promises. I suggested typing params as Promise<> and then either await it (server components) or use “use()” new React 19 API

How to pass seachParams around server components without prop drilling or context in client components (without giving up SEO and quick first paint)

follow up of the previous screenshot

@t3.gg said “show the world that you kinda know what you’re talking about”.
So I finally got involved and shared what I’ve learned.. I’ve been helping people on Discord servers @nextjs.org, @t3.gg and @codinginflow.bsky.social, and oddly enough I happen to know the right answers :’) feels good!

Exactly.
At the end it all depends on the user experience you want to provide🤷

Regarding the H2s, maybe moving them to the parent component would be best to only show the skeleton for the component itself, after all they’re part of the page 🤷

If both child components are wrapped in its own Suspense it wouldn’t matter, both fetches will trigger simultaneously, show their respective fallback and stream in independently.

If both child components are wrapped within the same Suspense both will wait until the slowest resolves

I would wrap each component in its own <Suspense>, so each can resolve independently. I would also fire the promises in the parent component and pass down as props to each child component.
Other than that I guess it depends on the user experience you want to provide.

What is this font it looks so pleasing lol 😭

Isn’t that what TanStack Start is going for? That’s my impression