Components
Loading preview...
Here is Theme Switch component
npx shadcn@latest add https://21st.dev/r/lyanchouss/theme-switch"use client";
import React from "react";
import ThemeSwitch from "@/components/ui/theme-switch";
import { ThemeProvider } from "next-themes";
export default function ThemeDemoWithLabel() {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<div className="min-h-[50vh] grid place-items-center px-6">
<div className="flex items-center gap-4 rounded-xl border p-4">
<div className="grid">
<span className="font-medium">Appearance</span>
<span className="text-sm text-muted-foreground">
Choose light or dark
</span>
</div>
<ThemeSwitch className="ml-6" />
</div>
</div>
</ThemeProvider>
);
}