RAIKOU

Raikou is a mantine fork which replaces css modules to adopt a unocss first-use approach.

Push the envelope, watch it bend.

About The Project

Mantine 6 with CSS-in-JS allowed for styles to be adjacent to the component it was styling. However with Mantine 7 styling has switched to CSS Modules. Many in the industry see CSS Modules as a step backwards and I (the fork author) share this sentiment. Therefore forking the project to integrate unocss was the obvious choice.

The project was conceived with these 4 long-term goals:

1. Facilitate css-in-js for all components.
2. To ensure that there were no clashes between the bootstrapped CSS of the component and when using the Styles API via the emotion plugin.
3. Once the pigment-css team move from WYW-in-JS to React compiler. To move from the emotion plugin generating runtime styles to the build process.

Project Caveats

1. NextJS, Qwik and any other non-vite javascript frameworks are not supported. There are no intentions of supporting anything other than Vite javascript frameworks.

2. There may be design decisions implemented that will diverge from Mantine.

   • Mantine and Raikou employ different approaches to manage the theme. While Mantine uses context and can be a runtime process for overrides. Raikou utilizes the pigment-css theme.

   • Next Themes is used in favour of the native mantine implementation.

   • Raikou uses Stylefusion which is a fork of pigment-css. Stylefusion negates the need for postcss and includes all the same functionality of postcss-mantine-preset.

(back to top)

Why not integrate pigment-css with mantine in the App?

Integrating Pigment-css with mantine at the app layer raises the complexity of the stack, also other issues of specificity are present.

CSS Modules is the wrong choice

Less headaches not dealing with postcss from a developer UX point of view.

(back to top)

Built With

(back to top)

Mirrored Mantine release

Latest release = 7.13.5

Getting Started

To get a local copy up and running follow these simple example steps.

Installation to a vite application

1. Install the required packages.

• yarn

yarn add @raikou/core @raikou/emotion @raikou/system
yarn add -D @stylefusion/vite-plugin

Note: Raikou uses yarn workspaces as there are various issues with pnpm.

2. Change the vite.config.js to:

import { extendTheme, pigment } from '@stylefusion/vite-plugin';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { getPigmentCSSTheme } from '@raikou/system';

const { cssTheme, rawTheme } = getPigmentCSSTheme();

const theme = extendTheme({
  cssVarPrefix: 'raikou',
  getSelector: (colorScheme) =>
    colorScheme ? `[data-raikou-color-scheme='${colorScheme}']` : ':root',
  ...cssTheme,
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    pigment({
      atomic: false,
      theme,
      rawTheme,
    }),
    TanStackRouterVite({}),
    react(),
  ],
});

Pro-tip: When atomic is set to true, the build process will atomicify the final css payload.

3. Add the Providers and stylesheets for the application:

import { createRootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
import { emotionTransform, RaikouEmotionProvider } from '@raikou/emotion';
import { RaikouProvider } from '@raikou/system';

import '@raikou/system/styles.css';
import '@stylefusion/react/styles.css';

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <>
      <RaikouProvider stylesTransform={emotionTransform}>
        <RaikouEmotionProvider>
          <Outlet />
        </RaikouEmotionProvider>
      </RaikouProvider>
      <TanStackRouterDevtools position="bottom-right" />
    </>
  );
}

(back to top)

Cloning the repo

1. Run the following command

git clone https://github.com/paulm17/raikou

2. Install all the package prerequisites

yarn

3. To run the vite website

yarn run dev

4. To run storybook

yarn run storybook

(back to top)

Roadmap

Raikou Components

• Extend loader component to support more loaders from react-spinners-kit, react-spinners.
• Include the original button spinner for mantine 6.
• Extend Button to support the button spinner from mantine 6.
• Copy the button loader from nextui.
• Add ripple effect to the action icon and button components from nextui.
• Add hero patterns from heropatterns.

Framer Motion

• Add aceternity
• Add magicui
• Add motion-primitives
• Add animata

New Components

• Add mantine-datatable
• Add mantine-contextmenu

Storybook

• Implement Storybook 8 with Vite and Stylefusion.

Testing

• Ensure Mantine tests pass with Raikou.

(back to top)

At this time, no contributions are sought. Thank you.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Paul M - no social - no email

(back to top)

Acknowledgments

• Vitaly and the Mantine community.
  
• Ionut-Cristian Florescu for Mantine DataTable and Mantine ContextMenu.
• Junior Garcia for Ripple Effect - NextUI

(back to top)

(back to top)