Kuma UI

A Headless, Utility-First, and Zero-Runtime UI Component Library

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

README

Kuma UI logo

Ultra Fast, Zero Runtime, Headless UI Components


Documentation

https://github.com/kuma-ui/kuma-ui/assets/59927325/c3f7da97-dbff-49bb-a578-1cb9134b8dd2


🐻‍❄️ Features


- ⚡ Zero-runtime: Deliver blazing-fast websites with zero-runtime CSS extraction.

- 🔮 Autocomplete: Experience seamless development with style autocompletion.

- 🛠️ Headless Components: Enjoy maximum customization freedom with our headless components.

- 🤝 Hybrid Approach: The best of both worlds—support for any writing style with our hybrid approach.

- 🚀 RSC Support: Stay updated with cutting-edge Next.js technology via our RSC support.

- 🥇 Familiar DX : Delight in the ultimate DX with our familiar API design.

💻 Installation


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

For installation instructions and more detailed information, please visit our documentation. Be sure to check out our guide for setting up Kuma UI with your specific framework (Next.js or Vite).


🔫 Example


  1. ```tsx
  2. function App() {
  3.   return (
  4.     <Box as="main" display="flex" flexDir={["column", "row"]}>
  5.       <Heading
  6.         as="h3"
  7.         className={css`
  8.           color: red;
  9.           @media (max-width: sm) {
  10.             color: blue;
  11.           }
  12.         `}
  13.       >
  14.         Kuma UI
  15.       </Heading>
  16.       <Spacer size={4} />
  17.       <Flex flexDir={`column`}>
  18.         <Text as="p" fontSize={24}>
  19.           Headless UI Component Library
  20.         </Text>
  21.         <Button variant='primary'>Getting Started</Button>
  22.       </Flex>
  23.     </Box>
  24.   );
  25. }
  26. ```

👥 Join the Community


Connect with us on Twitter and Discord to stay up to date with our latest developments, or to provide us with your valuable feedback!

Welcome to Kuma UI, we can't wait to see what you build with it 🐻‍❄️.