Installation

One dependency and one stylesheet import. Tailwind v4 needs no configuration file, and there is no CLI step or code generation to run.

Install

Add the package to your project.

terminal

npm install @nayan-ui/react

Configuration

Wire Tailwind up, then import the library's styles and theme tokens.

vite.config.ts

// 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 the library styles to index.css. The theme colour variables can be overridden here for both light and dark modes.

index.css

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

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

Usage

Wrap the tree in NTheme once; components can then be imported anywhere.

App.tsx

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;