@kuma-ui/core

Kuma UI

🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.

import { styled, k } from "@kuma-ui/core";

const color = 'orange'
function App() {
  return (
    <VStack p={[4, 8]} m="2px" _hover={{ flexDir: "row" }}>
      <k.div fontSize="40px" color={color}>
        hello world
      </k.div>
    </VStack>
  );
}

export const VStack = styled("div")`
  display: flex;
  flex-direction: column;
`;

export default App;

Features

🔥   Blazing-fast performance with zero-runtime CSS extraction

🦄   Build-time CSS generation

🌳   Responsive design with breakpoints and media queries

🎨   Utility-first approach for rapid UI development

👋   Support for pseudo-classes and pseudo-elements

🔬   Experimental support for Next.js 13.4 App router & React server components(RSC).

Installation

npm install @kuma-ui/core

or

yarn add @kuma-ui/core

Setup

Next.js

yarn add @kuma-ui/next-plugin

Traditional Pages Directory Version

next.config.js

const { withKumaUI } = require("@kuma-ui/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withKumaUI(nextConfig);

App Router Version (Experimental)

const { withKumaUI } = require("@kuma-ui/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true
  }
};

module.exports = withKumaUI(nextConfig);

Please note that as of now, App Router is an experimental feature. A .kuma directory will be produced in the process, which should be added to your .gitignore file. If you delete the .kuma directory, make sure to also clear the .next cache.

Vite

yarn add @kuma-ui/vite

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import KumaUI from "@kuma-ui/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxRuntime: "classic",
    }),
    KumaUI(),
  ],
});

Responsive Design

Kuma UI supports responsive design. Use arrays to specify different styles for different viewport widths. For example, <k.div fontSize={[16, 24]} /> changes the font size from 16px to 24px based on the window size.

Define the breakpoints in your config file:

import kumaUI from "@kuma-ui/vite";

kumaUI({
  breakpoints: { sm: "400px", md: "700px" },
});

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests with any improvements or suggestions.

License

MIT