Theme Provider Component

A theme provider component that wraps next-themes for theme management.

Theme Provider Active

This component wraps your app with theme support. It's typically used at the root level of your application.

Installation

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/theme-provider.json

bash

Usage

import { ThemeProvider } from '@vllnt/ui'

export function ThemeProviderExample() {
return (
  <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
    <div>Your app content</div>
  </ThemeProvider>
)
}

tsx

Code

'use client'

import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

typescript

Dependencies

next-themes