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.
Checkout demo for all the components Nayan UI exposing Checkout
- 🌈 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.
npm install nayan
yarn add nayanInclude module in tailwind.config.js to read tailwind classes, this will help in reusing same tailwind classes.
module.exports = {
important: true,
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 'node_modules/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;
}
}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.
Nayan project is included with all possible cases with examples, it can be ran locally to test each component.
$ git clone git@github.com:ursnj/nayan.git
$ cd nayan
$ npm install
$ npm startOpen your browser and visit http://localhost:7100
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! :)