React Reusable Components
APACHE-2.0 License
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
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;
}
}
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 [email protected]:ursnj/nayan.git
$ cd nayan
$ npm install
$ npm start
Open 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! :)