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 component requires theme settings to be configured in your AuthUIProvider. Without these settings, the component will not render.
import { AuthUIProvider } from "@better-auth-ui/react"
import { useTheme } from "next-themes"
function Providers({ children }: { children: React.ReactNode }) {
const { theme, setTheme } = useTheme()
return (
<AuthUIProvider
settings={{
theme,
setTheme,
themes: ["system", "light", "dark"]
}}
// ... other props
>
{children}
</AuthUIProvider>
)
}Props
Prop
Type
Last updated on