Skip to content

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

License

Notifications You must be signed in to change notification settings

narimanb/wreactui

Repository files navigation

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