Installation

MantleUI is a rich set of open source UI components for React.

Download#

Mantle UI is available on npm.


// with npm
npm install @mantle-ui/react

// with yarn
yarn add @mantle-ui/react

Context#

Configuration is managed by the MantleProvider and MantleContext imported from @mantle-ui/react/api.


import { MantleProvider, MantleContext } from '@mantle-ui/react/api';

The MantleProvider component is used to wrap the application and the MantleContext is used to access the configuration options.


// _app.js
import { MantleProvider } from '@mantle-ui/react/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <MantleProvider>
            <Component {...pageProps} />
        </MantleProvider>
    );
}

Usage#

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.


import { Button } from '@mantle-ui/react/button';

Theming#

MantleUI has two theming modes; styled or unstyled.

Styled Mode#

Styled mode is based on pre-skinned components with opinionated themes such as Material, Bootstrap, and Lara. Theme is the required css file to be imported, visit the Themes section for the complete list of available themes to choose from.


import "@mantle-ui/react/resources/themes/lara-light-cyan/theme.css";

Unstyled Mode#

Unstyled mode is disabled by default for all components. Using the MantleContext during installation, set unstyled as true to enable it globally. Visit the Unstyled mode documentation for more information and examples.


import { MantleProvider } from "@mantle-ui/react/api";
...
return(
    <MantleProvider value={{ unstyled: true }}>
        <App />
    </MantleProvider>
)

Examples#

Mantle UI works with the usual React application setups, including Vite and Next.js.

Framework-specific starter examples are being refreshed for the Mantle UI project and will be published in the repository as they are finalized.