Nifty admin

Login Component with Shadcn’s Lyra Theme

I’ve been a Next.js developer for years. It’s been my go-to framework, my comfort zone, my “just spin up a new Next app” solution. But lately, something felt off. The App Router complexity, the constant breaking changes, the RSC issue, the Vercel-centric ecosystem.

So I decided to try something different. And honestly? I’m not looking back.

The Stack That Changed Everything

Here’s what I’m building with now:

TanStack Start (React 19 + Vite 7)
shadcn/ui v2 (Base UI + Tailwind 4)
Better Auth (TypeScript-first authentication)

Let me tell you why each of these is a game-changer.

TanStack Start: The Next.js Alternative Nobody’s Talking About

You know Tanner Linsley, right? The guy behind React Query, React Table, and React Router? Well, he built a full-stack React framework. And it’s good.

TanStack Start gives you:

React 19 with all the new goodies (Server Components, Actions, the works)
Vite 7 as the bundler (goodbye webpack nightmares)
File-based routing that actually makes sense
Full SSR/SSG support without the mental gymnastics

The DX is incredible. Hot reload is instant. The build is fast. And most importantly — it’s not trying to lock you into any particular deployment platform.

// It's just... React. Clean, simple React.
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/")({
  component: HomePage,
})function HomePage() {
  return <div>Hello, freedom!</div>
}

No "use client" directives everywhere. No wondering if your component is server or client. Just React.

Shadcn V2: This Changes Everything

Okay, let’s talk about the real star of the show.

If you’ve used shadcn/ui before, you know it’s great. Copy-paste components, full ownership of your code, Radix primitives under the hood. Good stuff.

But v2 is a complete rewrite. You can now customize your theme based on your taste!

Check out the Lyra style, tho. I fell in love with it.

They also make it available with Base UI. We all know Radix UI is less maintained by its developer so, good move, Shadab!

Why Base UI?

Base UI is the unstyled component library from the MUI team. It’s:

Lighter weight than Radix
More flexible composition model
No asChild prop gymnastics
Better TypeScript support

Tailwind CSS v4

No need for a long explanation for Tailwind v4, but here’s the key takeaways:

CSS-first configuration — no more tailwind.config.js
OKLCH colors — better color manipulation, smoother gradients
Native CSS variables — theming is just CSS now

Here’s what theming looks like in v2:

:root {
  --primary: oklch(0.55 0.22 25);
  --primary-foreground: oklch(0.98 0.01 25);
}

.dark {
  --primary: oklch(0.65 0.20 25);
}

No JavaScript. No theme providers. Just CSS variables that work everywhere.

The Component Quality

Every component has been redesigned. The attention to detail is insane:

Proper focus management
Keyboard navigation that actually works
Animations that feel native
Dark mode that doesn’t look like an afterthought

I spent an hour just playing with the dropdown menu. The nested submenus, the checkbox items, the radio groups — it all just amazing.

Better Auth: Authentication That Doesn’t Suck

I’ve tried them all. NextAuth (now Auth.js), Clerk, Supabase Auth, Firebase. They all have trade-offs.

Then I found Better Auth.

I want to give some credit to this new raising star auth library, that tons of devs is talking about.

It’s a TypeScript-first authentication library that:

Works with any framework (not just Next.js!)
Supports OAuth providers out of the box
Has a clean, simple API
Stores sessions in YOUR database

Setting up Google OAuth was refreshingly simple:

import { betterAuth } from "better-auth"
import { prismaAdapter } from "better-auth/adapters/prisma"

export const auth = betterAuth({
  database: prismaAdapter(prisma, { provider: "postgresql" }),
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
})

On the client:

import { signIn, useSession } from "@/lib/auth-client"

// Sign in with Google
await signIn.social({ provider: "google" })// Get current session
const { data: session } = useSession()

That’s it. No providers wrapping your app. No complex configuration. It just works.

The best part? First-time users are automatically registered. No separate signup flow needed for OAuth.

The Full Picture

Here’s what my project structure looks like:

src/
├── components/
│   ├── ui/           # shadcn components
│   ├── mode-toggle.tsx
│   └── user-menu.tsx
├── lib/
│   ├── auth.ts       # Better Auth server
│   ├── auth-client.ts
│   └── utils.ts
├── routes/
│   ├── api/auth/$.ts # Auth API handler
│   ├── __root.tsx
│   ├── index.tsx
│   └── login.tsx
└── styles.css        # Tailwind + theme

Everything is colocated. Everything is typed. Everything is fast.

Should You Switch?

Look, I’m not saying Next.js is bad. It’s still a great framework with a massive ecosystem.

But if you’re feeling the pain of:

Constant breaking changes
Confusing Server Component boundaries
Vercel lock-in concerns
Slow development builds

…then maybe it’s time to explore alternatives.

TanStack Start is production-ready. shadcn v2 is a massive upgrade. Better Auth is the authentication DX we deserve.

The React ecosystem is bigger than Next.js. And in this coming 2026, we have options.

Resources

What’s your current React stack? Have you tried any of these tools? Let me know in the comments.

Blog

Test