Skip to content
Nariman Bortov edited this page Jul 6, 2023 · 7 revisions

image

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

codecov Build License: MIT Maintenance

image Install

Install via npm

npm i -D @narimanb/wreactui

Install via yarn

yarn add -D @narimanb/wreactui

image 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: [],
});

image 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;

image Documentation

image Examples

dark & light theme

controls-animate

dashboard

dashboard

image 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.

image History

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

Clone this wiki locally