Kuma UI

zero-runtime CSS-in-JS with type-safe utility props

CSS in JSReact
poteboy/kuma-uikuma-ui.com@kuma-ui/core

README


  :construction: :rotating_light: BIG NEWS! :rotating_light: :construction:

  We are taking Kuma UI to the next level. The ultimate CSS-in-JS solution is under development and we're aiming to drop the updates on July 16th, 2023. Until then, new releases will be paused. Stay tuned and get ready for the revolution 🐻‍❄️

Kuma UI logo

Ultra Fast, Zero Runtime, Utility-First CSS-in-JS


Documentation



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

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


  1. ```sh
  2. npm install -D @kuma-ui/core
  3. ```

or

  1. ```sh
  2. yarn add @kuma-ui/core -D
  3. ```

Usage


styled API


The styled API works just like styled-components or Emotion, allowing you to create styled React components using tagged template literals. This makes it a familiar and comfortable choice for developers who have worked with these libraries.

  1. ```tsx
  2. import { styled } from "@kuma-ui/core";

  4. const Box = styled("div")`
  5.   position: relative;
  6.   &:hover {
  7.     background-color: rgba(0, 0, 255, 0.5);
  8.   }
  9.   @media (max-width: 768px) {
  10.     flex-direction: column;
  11.   }
  12. `;

  14. // Then use it like so:
  15. <Box>Hello, world!</Box>;
  16. ```

k object


The k object is a key part of Kuma UI's API. It provides pre-styled HTML elements that you can use as components in your application. These elements can be styled using utility props for inline styling. The utility props are type-safe and make it easy to write responsive styles.

  1. ```tsx
  2. import { k } from "@kuma-ui/core";

  4. function App() {
  5.   return (
  6.     <k.div p={[4, 8]} m="2px" _hover={{ flexDir: "row" }}>
  7.       hello world
  8.     </k.div>
  9.   );
  10. }
  11. ```

css function


The css function is another way to style your components. It takes an object of styles and returns a string of hashed classNames that you can apply to your component using the className prop.

  1. ```tsx
  2. import { css } from "@kuma-ui/core";

  4. const styles = css({ color: "red", fontSize: "24px" });

  6. function App() {
  7.   return <div className={styles}>Hello, world!</div>;
  8. }
  9. ```

Setup


Next.js


  1. ```sh
  2. yarn add @kuma-ui/next-plugin -D
  3. ```

Pages Directory Version


next.config.js

  1. ```js
  2. const { withKumaUI } = require("@kuma-ui/next-plugin");

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

  9. module.exports = withKumaUI(nextConfig);
  10. ```

App Router Version (Experimental)


next.config.js

  1. ```js
  2. const { withKumaUI } = require("@kuma-ui/next-plugin");

  4. /** @type {import('next').NextConfig} */
  5. const nextConfig = {
  6.   reactStrictMode: true,
  7.   experimental: {
  8.     appDir: true
  9.   }
  10. };

  12. module.exports = withKumaUI(nextConfig);
  13. ```

Vite


  1. ```sh
  2. yarn add @kuma-ui/vite -D
  3. ```

vite.config.ts

  1. ```js
  2. import { defineConfig } from "vite";
  3. import react from "@vitejs/plugin-react";
  4. import KumaUI from "@kuma-ui/vite";

  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     react(),
  10.     KumaUI(),
  11.   ],
  12. });
  13. ```

Responsive Design


Kuma UI supports responsive design. Use arrays to specify different styles for different viewport widths. For example, changes the font size from 16px to 24px based on the window size.

Define the breakpoints in your config file:
  1. ```js
  2. import kumaUI from "@kuma-ui/vite";

  4. kumaUI({
  5.   breakpoints: { sm: "400px", md: "700px" },
  6. });
  7. ```

Roadmap


Our ultimate goal is to develop a zero-runtime headless component library. We're currently focusing on enhancing the core and expanding our range of components. We aim to create a unique library that allows users to pass style props, operates with zero runtime, and remains accessible. In the future, we plan to introduce a kuma.config.js that allows users to define their own variants, making Kuma UI a go-to tool for creating design systems with high performance.


Contributing

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

Adding a changeset

Don't forget to include a changeset as well, by running this command at the root of the project:

  1. ```sh
  2. pnpm changeset
  3. ```

License

MIT