Table of contents

• Getting started
• Dependencies
• About
• Documentation
• Live Demo

Getting Started

Adding Package

Install Well Rounded UI from NPM:

npm i well-rounded-ui

Adding Well Rounded UI's styles

To use Well Rounded Ui's styles you have to wrap your app into WellRoundedUI component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { WellRoundedUI } from 'well-rounded-ui';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WellRoundedUI>
      <App />
    </WellRoundedUI>
  </React.StrictMode>,
)

Importing Components

Import required Well Rounded UI components within your files:

import { Button } from 'well-rounded-ui';

Now you are ready to use the imported Well Rounded UI components ! 🔥

Displaying MDI Icons

To use Material Design Icons import them inside your index.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">

Import the latest version of the icons: https://www.jsdelivr.com/package/npm/@mdi/font

Now you will see all latest mdi icons !

Dependencies

Required Peer Dependencies

These libraries are not bundled with Well Rounded UI and required at runtime:

• react
• react-dom
• react-transition-group

About Well Rounded

Compact yet powerful package meaning you won't have to spend many hours to understand how simple it is to use !

Reusable Components

Many reusable components:

• Buttons with predefined styles
• Inputs fields: All types are supported (text, textarea, date, select, checkboxes, etc)
• Easy editable Spinners
• Smooth Alerts like sweet-alert package
• MultiSelect to select several entries
• Modal to show more data over the page
• Floating side bar for in depth information
• Tabs to split your contents
• Badges to highlight important texts
• Customizable Table provided with a Pagination component !
• And more to discover...

Homemade components

This package does not use bootstrap, sweet alert, multi-select, reactstrap and more but they are still available: reasons why?

I build my own bootstrap* column layout, buttons components, multi-select, sweet alert, ... It avoids the project to import useless css and packages prefering focusing the usefull features only.

*Many class names from bootstrap exist with the same name so you won't be lost !

Material Design Icons

Free to use popular icons with many new icons being added monthly. I have been using this icon library for many years always finding the perfect icon to use.

https://materialdesignicons.com/

Documentation

https://sachamarits.github.io/well-rounded-ui

Live Demo

Live demo: https://well-rounded-react-template.sacha-marits.be/ Most components can be seen within: Template > Components and Template > Crud Table.