Camome UI enables you to build various styles of components without run-time JavaScript by fully utilizing the power of CSS.
Sheraton Okinawa Sunmarina Resort
¥62,000
Fully themable
By combining a well-constructed 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.
import CalendarDaysIcon from "@heroicons/react/24/outline/CalendarDaysIcon";
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" endDecorator={<CalendarDaysIcon />} className={styles.button} > Book now </Button> </div> </div> </section> );}
Fully themable.
Camome provides sensible defaults, but may not be to everyone's taste. Customize the theme to suit your site.
Jean Doe
@jean_doeProLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Light
Energetic
Dark
Cyberpunk
.Button { border-radius: var(--cmm-radius-full); background: linear-gradient( to right, hsl(240deg 60% 40%) 0%, hsl(300deg 80% 40%) 100% );}
Simply override.
It's not that !important
All styles are enclosed within @layer
Don't worry about order or specificity when overriding.
Start your next project from here.
Develop faster with a well-constructed design system and components.