Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@kuma-ui/sheet
Advanced tools
🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.
🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.
🔥 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).
npm install @kuma-ui/core
or
yarn add @kuma-ui/core
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.
import { k } from "@kuma-ui/core";
function App() {
return (
<k.div p={[4, 8]} m="2px" _hover={{ flexDir: "row" }}>
hello world
</k.div>
);
}
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.
import { css } from "@kuma-ui/core";
const styles = css({ color: 'red', fontSize: '24px' });
function App() {
return <div className={styles}>Hello, world!</div>;
}
yarn add @kuma-ui/next-plugin
next.config.js
const { withKumaUI } = require("@kuma-ui/next-plugin");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = withKumaUI(nextConfig);
next.config.js
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.
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(),
],
});
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" },
});
Contributions are welcome! Please feel free to submit issues or pull requests with any improvements or suggestions.
MIT
FAQs
🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.
We found that @kuma-ui/sheet demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.