narimanb / wreactui

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

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