---
title: "Overview"
id: "guide:overview"
---

<Message status="warn" title="Camome UI is not yet stable">
  Breaking changes may be introduced without increment of major version number.
  When you update `@camome/*`, see
  [changelogs](https://github.com/camomeui/camome/releases) to make sure your
  code is not affected by breaking changes.
</Message>

## 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](https://bundlephobia.com/package/@mui/material@5.11.6)), 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.

<Message status="info">
  Camome UI imports CSS Modules from the `dist` directory and Bundlephobia
  doesn't support it. So the bundle size comes from [our own
  calculation](https://github.com/camomeui/camome/blob/4cef229a074c05d437e65abb9a1b62286f131598/apps/web/scripts/gen-docs-data.ts#L124).
</Message>

### CSS first & no JS runtime

Camome UI uses [CSS Modules](https://github.com/css-modules/css-modules) for styling, so there is no runtime overhead unlike [Emotion](https://emotion.sh/docs/introduction) and [Styled Components](https://styled-components.com/).

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 <DocLink id="menu"/> and <DocLink id="tab"/>, please see <DocLink id="guide:headless-integration"/>.

### Dark mode and custom theme

Dark mode is supported by default. It is also possible to customize the theme. For details, please refer to <DocLink id="guide: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](https://github.com/lukeed/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](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to guarantee your custom CSS always wins**. For more information, please refer to <DocLink id="guide:theming" hash="overriding-components" />.

### Accessible

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

For example, <DocLink id="switch"/> is built only with CSS, but it can be focused and toggled by keyboard, and the <DocLink id="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 <DocLink id="guide:form"/>).

<Message status="info">
  If you find any accessibility problems, please [report an
  issue](https://github.com/camomeui/camome/issues).
</Message>

### 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.

```html
<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
