nayan

Nayan UI provides React Reusable Components based on Tailwind CSS and Radix UI. This library is a collection of pre-designed and pre-built React components that can be used to quickly and easily build beautiful, functional and fully accessible user interfaces for your web applications.

🖥 Demo

Checkout demo for all the components Nayan UI exposing Checkout

✨ Features

• 🌈 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 🌍 Internationalization support for dozens of languages.
• 🎨 Powerful theme customization based on Tailwind CSS.

🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron and Tauri

🔨 Install

npm install nayan
yarn add nayan

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

module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{ts,tsx}', './index.html', './node_modules/nayan/dist/index.es.js'], // Check node_modules path properly
  theme: {
    extend: {
      colors: {
        primary: 'var(--COLOR_PRIMARY)',
        'primary-light': 'var(--COLOR_PRIMARY_LIGHT)',
        'primary-dark': 'var(--COLOR_PRIMARY_DARK)',
        background: 'var(--COLOR_BACKGROUND)',
        text: 'var(--COLOR_TEXT)',
        muted: 'var(--COLOR_MUTED)',
        border: 'var(--COLOR_BORDER)',
        card: 'var(--COLOR_CARD)',
        shadow: 'var(--COLOR_SHADOW)',
        overlay: 'var(--COLOR_OVERLAY)'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
};

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

@import 'nayan/dist/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --COLOR_PRIMARY: #005ee6;
    --COLOR_PRIMARY_DARK: #0043a3;
    --COLOR_PRIMARY_LIGHT: #0069ff;
    --COLOR_BACKGROUND: #f5f5f5;
    --COLOR_CARD: #ffffff;
    --COLOR_TEXT: #050505;
    --COLOR_MUTED: gray;
    --COLOR_BORDER: #d3d3d3;
    --COLOR_SHADOW: #d3d3d3;
    --COLOR_OVERLAY: rgba(255, 255, 255, 0.7);
  }

  [data-theme='dark'] {
    --COLOR_PRIMARY: #005ee6;
    --COLOR_PRIMARY_DARK: #0043a3;
    --COLOR_PRIMARY_LIGHT: #0069ff;
    --COLOR_BACKGROUND: #1f1f1f;
    --COLOR_CARD: #303030;
    --COLOR_TEXT: #f5f5f5;
    --COLOR_MUTED: gray;
    --COLOR_BORDER: #505050;
    --COLOR_SHADOW: #cbcbcb;
    --COLOR_OVERLAY: rgba(0, 0, 0, 0.7);
  }

  body {
    color: var(--COLOR_TEXT) !important;
    background-color: var(--COLOR_BACKGROUND) !important;
  }
}

🕹 Usage

Theme

import { useState } from 'react';
import { NTheme, THEMES, useLocalStorage } from 'nayan';

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;

For more info checkout example source code from Github and run it in local.

⌨️ Development

Nayan project is included with all possible cases with examples, it can be ran locally to test each component.

$ git clone [email protected]:ursnj/nayan.git
$ cd nayan
$ npm install
$ npm start

Open your browser and visit http://localhost:7100

🤝 Contributing

We welcome all contributions. You can submit any ideas as Pull Requests or as GitHub Issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)