@narimanb/wreactui

The React UI component library based on Tailwind CSS V3 for fast and accessible development of gorgeous interfaces.

Install

Install via npm

npm i -D @narimanb/wreactui

Install via yarn

yarn add -D @narimanb/wreactui

Configuration

Add wreactui in your tailwind.config.js file.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */

const wreactui = require('@narimanb/wreactui/config');

module.exports = wreactui({
   content: ['./src/**/*.{html,js}'],
   theme: {
       extend: {},
   },
   plugins: [],
});

Usage

Place Wreactui at the root of your project (the order doesn't matter, as long as your application is inside).

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Wreactui } from '@narimanb/wreactui';

ReactDOM.render(
   <Wreactui>
      <App />
   </Wreactui>,

   document.getElementById('root')
);

Use components inside your project

import { Button } from '@narimanb/wreactui';

function App() {
   return <Button>Hi there!</Button>;
}

export default App;

Documentation

• Alert
• Avatar
• Backdrop
• Badge
• Button
• Card
• Dropdown
• Helper Text
• Input
• Label
• Modal
• Pagination
• Select
• Table
• Textarea
• Transition
• Wreactui

Examples

dark & light theme

dashboard

Development

1. Install Node 18 or later. You can use the package manager of your choice.
2. Clone this repository git clone https://github.com/narimanb/wreactui.git.
3. Run npm ci to install the dependencies.
4. Run npm run storybook
5. It will start a local server at localhost:6006 with all components rendered.

History

Original Project Tailwind CSS V2 Windmill React UI Projects using it: Windmill Dashboard React