Components
<Appearance />
A theme selector card with visual theme previews for system, light, and dark themes.
Usage
import { Appearance } from "@/components/settings/account/appearance"
function RouteComponent() {
return (
<div className="container mx-auto p-4 md:p-6">
<Appearance />
</div>
)
}})
import { Appearance } from "@better-auth-ui/shadcn"
function RouteComponent() {
return (
<div className="container mx-auto my-auto p-4 md:p-6">
<Appearance />
</div>
)
}Installation
npx shadcn@latest add https://better-auth-ui.com/r/appearance.jsonTheme Configuration
The Appearance section reads settings.appearance from useAuth(). It only renders when setTheme is defined and themes has at least one entry. Defaults from the library supply themes: ["system", "light", "dark"] via config merge, so you typically pass theme and setTheme from your theme library (for example next-themes).
Wrap the app with ThemeProvider from next-themes (for example in your root layout), then wire the same values into AuthProvider:
import { AuthProvider } from "@better-auth-ui/shadcn/react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useTheme } from "next-themes"
import { authClient } from "@/lib/auth-client"
function Providers({ children }: { children: React.ReactNode }) {
const router = useRouter()
const { theme, setTheme } = useTheme()
return (
<AuthProvider
authClient={authClient}
Link={Link}
navigate={({ to, replace }) =>
replace ? router.replace(to) : router.push(to)
}
settings={{
appearance: {
theme,
setTheme
// Optional: override which options appear (default: system, light, dark)
// themes: ["light", "dark"],
}
}}
>
{children}
</AuthProvider>
)
}Props
Prop
Type
Last updated on