Overview

Camome UI is not yet stable

Breaking changes may be introduced without increment of major version number. When you update @camome/*, see changelogs to make sure your code is not affected by breaking changes.

What is Camome UI

Camome UI is a React component library and a CSS framework.

Camome (かもめ, カモメ, 鴎) means seagull in Japanese by the way.

Features

Lightweight bundle size

For example, import Button from "@mui/material/Button" costs 16.9KB (Bundlephobia), and Emotion and ThemeProvider are required.

On the other hand, import { Button } from "@camome/core/Button" costs 1.42KB (including CSS), and an extra 4KB of global CSS is required.

Camome UI imports CSS Modules from the dist directory and Bundlephobia doesn't support it. So the bundle size comes from our own calculation.

CSS first & no JS runtime

Camome UI uses CSS Modules for styling, so there is no runtime overhead unlike Emotion and Styled Components.

Also, since no event handlers or useEffect are used at all, it can also be used as a pure CSS framework as described later. For complex UIs such as Menu and Tab, please see Integration with headless UI libraries.

Dark mode and custom theme

Dark mode is supported by default. It is also possible to customize the theme. For details, please refer to Theming.

Guaranteed style override

One drawback of CSS Modules is difficulty in overriding styles. For example, all components of Camome UI accept className prop, and this is joined with the default class name by clsx. So it ends up with class="Button custom-class" attribute added, but there is no guarantee that the latter class will win. This is a problem.

However, Camome UI supports CSS Cascade Layers to guarantee your custom CSS always wins. For more information, please refer to Theming.

Accessible

While it may not be perfect, we are giving serious attention to accessibility.

For example, Switch is built only with CSS, but it can be focused and toggled by keyboard, and the Accordion also supports opening and closing without client-side JavaScript by utilizing the <details /> element. Also, each input-like component can easily receive aria-labelledby and aria-describedby values using <FormField /> (see Form).

If you find any accessibility problems, please report an issue.

Easily eject, no lock-in

Camome UI consists of nothing but 1. React components, 2. CSS Modules, 3. theme.css, so it can be easily moved into your own codebase just by copying and pasting.

Framework agnostic

While primarily designed as a React library, Camome can also be used as a CSS framework like Bootstrap by importing bundled CSS. It's easy to support other frameworks like Vue or Svelte by just binding class names.

<head>
  <link
    href="https://unpkg.com/@camome/system@latest/dist/theme.css"
    rel="stylesheet"
  />
  <link
    href="https://unpkg.com/@camome/core@latest/dist/components.css"
    rel="stylesheet"
  />
</head>
<body>
  <button class="Button Button--primary Button--soft">Click me</button>
</body>

Roadmap

  • Toast
  • Slider (non-native and custom looking)
  • Component blocks
  • RTL support