Light weight, accessibleUI framework for React and CSS

Camome UI enables you to build various styles of components without run-time JavaScript by fully utilizing the power of CSS.

Get startedGitHub
🎉 4👍 5😸 8😀 3🙌 2
avataravataravatarYM+12
16 people reacted
Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa
30%OFF2 rooms left

Sheraton Okinawa Sunmarina Resort

¥62,000

Fully themable

By combining a well-designed design system and CSS variables, you can freely customize the theme.

Just CSS, no runtime JavaScript

Built on top of CSS Modules, Camome UI is free from runtime overhead unlike with CSS-in-JS

Simple but elegant design

All the components are designed to blend in with basic design websites, but also can be aggressively customized.

Nothing fancy, it just works.

Camome UI is not a fancy framework that advocates for new styling methods. You know how to use it.

Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa
30%OFF2 rooms left

Sheraton Okinawa Sunmarina Resort

1 night, 2 adults

¥62,000

import { CalendarDaysIcon } from "@heroicons/react/24/outline";


import { Button } from "@camome/core/Button";
import { Tag } from "@camome/core/Tag";


import styles from "./Card.module.scss";


export default function Card() {
  return (
    <section className={styles.container}>
      <img
        src="/demo/okinawa-hotel.jpg"
        alt="Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa"
        className={styles.img}
      />
      <div className={styles.content}>
        <div className={styles.tags}>
          <Tag size="sm" colorScheme="success">
            30%OFF
          </Tag>
          <Tag size="sm" colorScheme="warn">
            2 rooms left
          </Tag>
        </div>
        <h3 className={styles.title}>Sheraton Okinawa Sunmarina Resort</h3>
        <div className={styles.row}>
          <div className={styles.priceWrap}>
            <small className={styles.small}>1 night, 2 adults</small>
            <p className={styles.price}>¥62,000</p>
          </div>
          <Button
            size="sm"
            rightIcon={<CalendarDaysIcon />}
            className={styles.button}
          >
            Book now
          </Button>
        </div>
      </div>
    </section>
  );
}

Fully themable.

It provides sensible defaults, but may not be to everyone's taste. Customize the theme to suit your site.

Customize theme
Avatar image

Jean Doe

@jean_doePro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Simply override.

It's not that !important

All styles are enclosed within @layer. Don't worry about order or specificity when overriding.

.Button {
  border-radius: var(--cmm-radius-full);
  background: linear-gradient(
    to right,
    hsl(240deg 60% 40%) 0%,
    hsl(300deg 80% 40%) 100%
  );
}

Start your next project from here.

Develop faster with a well-constructed design system and components.

Get startedGitHub