next-themes VS shadcn/ui

Next themes is used for themes switching

Shadcn UI supports dark mode for Next.js and Vite applications. For Next.js applications, Shadcn UI uses next-themes for the dark mode toggling functionality. When a user toggles between light and dark mode, the application switches between the light and dark theme tokens.

Let’s start with Next.js. We’ll use the next-themes package, which allows us to handle dark mode very easily without worrying about blocking page rendering to check user preferences.

"use client"; import React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { ThemeProviderProps } from "next-themes/dist/types"; // https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564 // needs to be called NextThemesProvider not ThemesProvider // not sure why export function Providers(props: ThemeProviderProps) { return ; }

Next themes

It is that simple. It has 74,528 weekly npm downloads and if it's good enough for @leeerob, it's good for me too. Get creative with your loading state and toggle button (or not && KISS). Check out their next-themes GH repo for more info.

also: https://github.com/pacocoursey/next-themes

i usually use https://github.com/pacocoursey/next-themes when dealing with themes, it doesnt flash

Shadcn UI

You can access shadcn/UI using the following links. Official Site Github Repo

I build an Angular or React app or smart component that uses the store in an Nx monorepo. I use the Shadcn UI in React apps, and the Shadcn-based spartan/ui in Angular apps, so I can use almost the same app architecture both in Angular and React.

Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!

Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI

Honestly the ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that.

[1] https://ui.shadcn.com/

shadcn/ui

This model is very similar to the popular shadcn workflow. After files are creating in your local repo, you can modify them and check them into source control.

Link: https://ui.shadcn.com/