Nayan UI - Simplest React Component Library and Devtools

Nayan UI provides React component library based on Tailwind CSS and Radix UI (Shadcn). 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 application.

🖥 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

1npm install nayan
2yarn add nayan
3bun install nayan

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

1module.exports = {
2  darkMode: ['class'],
3  content: ['./src/**/*.{ts,tsx}', './index.html', './node_modules/nayan/dist/index.es.js'], // Check node_modules path properly
4  theme: {
5    extend: {
6      colors: {
7        primary: 'var(--COLOR_PRIMARY)',
8        'primary-light': 'var(--COLOR_PRIMARY_LIGHT)',
9        'primary-dark': 'var(--COLOR_PRIMARY_DARK)',
10        background: 'var(--COLOR_BACKGROUND)',
11        text: 'var(--COLOR_TEXT)',
12        muted: 'var(--COLOR_MUTED)',
13        border: 'var(--COLOR_BORDER)',
14        card: 'var(--COLOR_CARD)',
15        shadow: 'var(--COLOR_SHADOW)',
16        overlay: 'var(--COLOR_OVERLAY)'
17      }
18    }
19  },
20  plugins: [require('tailwindcss-animate')]
21};

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

1@import 'nayan/dist/style.css';
2
3@tailwind base;
4@tailwind components;
5@tailwind utilities;
6
7@layer base {
8  :root {
9    --COLOR_PRIMARY: #005ee6;
10    --COLOR_PRIMARY_DARK: #0043a3;
11    --COLOR_PRIMARY_LIGHT: #0069ff;
12    --COLOR_BACKGROUND: #f0f2f5;
13    --COLOR_CARD: #ffffff;
14    --COLOR_TEXT: #050505;
15    --COLOR_MUTED: 'gray';
16    --COLOR_BORDER: #e0e0e0;
17    --COLOR_SHADOW: #d3d3d3;
18    --COLOR_OVERLAY: rgba(255, 255, 255, 0.7);
19  }
20
21  [data-theme='dark'] {
22    --COLOR_PRIMARY: #2997ff;
23    --COLOR_PRIMARY_DARK: #0a84ff;
24    --COLOR_PRIMARY_LIGHT: #7dc1ff;
25    --COLOR_BACKGROUND: #1f1f1f;
26    --COLOR_CARD: #353535;
27    --COLOR_TEXT: #f5f5f5;
28    --COLOR_MUTED: #afafaf;
29    --COLOR_BORDER: #4f4f4f;
30    --COLOR_SHADOW: #cbcbcb;
31    --COLOR_OVERLAY: rgba(0, 0, 0, 0.7);
32  }
33
34  body {
35    color: var(--COLOR_TEXT) !important;
36    background-color: var(--COLOR_BACKGROUND) !important;
37  }
38}

🕹 Usage

Theme

1import { useState } from 'react';
2import { NTheme, THEMES, useLocalStorage } from 'nayan';
3
4const App = () => {
5  const [theme, setTheme] = useLocalStorage('THEME', THEMES.LIGHT);
6
7  const toggleTheme = () => {
8    setTheme(theme === THEMES.LIGHT ? THEMES.DARK : THEMES.LIGHT);
9  };
10
11  return (
12    <NTheme theme={theme}>
13      <div className="p-3" onClick={toggleTheme}>
14        TOGGLE THEME
15      </div>
16    </NTheme>
17  );
18};
19
20export 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.

1$ git clone git@github.com:ursnj/nayan.git
2$ cd nayan
3$ npm install
4$ 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! :)