Raikou is a mantine fork which replaces css modules to adopt a unocss first-use approach.
Push the envelope, watch it bend.
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:
- Facilitate css-in-js for all components.
- To ensure that there were no clashes between the bootstrapped CSS of the component and when using the Styles API via the emotion plugin.
- 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.
-
NextJS, Qwik and any other non-vite javascript frameworks are not supported. There are no intentions of supporting anything other than Vite javascript frameworks.
-
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.
-
Integrating Pigment-css with mantine at the app layer raises the complexity of the stack, also other issues of specificity are present.
Less headaches not dealing with postcss from a developer UX point of view.
Latest release = 7.13.2
To get a local copy up and running follow these simple example steps.
- Install the required packages.
- npm
npm install @raikou/core @raikou/emotion @raikou/system
npm -D install @stylefusion/vite-plugin
- yarn
yarn add @raikou/core @raikou/emotion @raikou/system
yarn add -D @stylefusion/vite-plugin
- Change the vite.config.js to:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { pigment, extendTheme } from "@stylefusion/vite-plugin";
import { TanStackRouterVite } from "@tanstack/router-plugin/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.
- Add the Providers and stylesheets for the application:
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { RaikouProvider } from "@raikou/system";
import { emotionTransform, RaikouEmotionProvider } from "@raikou/emotion";
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" />
</>
);
}
- Run the following command
git clone https://github.com/paulm17/raikou
- Install all the package prerequisites
pnpm i
- To run the vite website
pnpm run dev
- To run storybook
pnpm run storybook
- 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.
- Add aceternity
- Add magicui
- Add motion-primitives
- Add animata
- Add mantine-datatable
- Add mantine-contextmenu
- Pigment-css team fixed Storybook 8 issues.
At this time, no contributions are sought. Thank you.
Distributed under the MIT License. See LICENSE.txt
for more information.
Paul M - no social - no email