Installation

npm install @nayan-ui/react

Configuration

Include module in `tailwind.config.js` to read tailwind classes, this will help in reusing same tailwind classes.

// No tailwind.config.js needed with Tailwind v4!
// HeroUI styles handle theming automatically.
// Use @tailwindcss/vite plugin in vite.config.ts:


import tailwindcss from '@tailwindcss/vite';


export default defineConfig({
  plugins: [tailwindcss(), react()],
});

Add library styles to `index.css`, and update theme color variables accordingly for both light and dark modes.

@import '@nayan-ui/react/styles.css';


body {
  color: var(--foreground);
  background: var(--background);
}

Usage

import { useState } from 'react';
import { NTheme, THEMES, useLocalStorage } from '@nayan-ui/react';


const App = () => {
  const [theme, setTheme] = useLocalStorage('THEME', THEMES.LIGHT);


  const toggleTheme = () => {
    setTheme(theme === THEMES.LIGHT ? THEMES.DARK : THEMES.LIGHT);
  };


  return (
    <NTheme theme={theme}>
      <div className="p-3" onClick={toggleTheme}>TOGGLE THEME</div>
    </NTheme>
  );
};


export default App;