Camome UI

軽量でアクセシブル。ReactとCSSのためのUIフレームワーク

CSSをフル活用しているので、ランタイムJavaScriptなしで多彩なスタイルのコンポーネントを実装できます。

はじめる GitHub

🎉 4👍 5😸 8😀 3🙌 2

YM+12

16 people reacted

First name

Last name

Accept terms

Remember me

30%OFF2 rooms left

Sheraton Okinawa Sunmarina Resort

¥62,000

テーマは自由にカスタマイズ可能

丁寧に設計されたデザインシステムとCSS変数の組み合わせにより、テーマを自在にカスタマイズできます。

CSSだけ、ランタイムJavaScriptなし

CSS Modulesでスタイリングされているので、CSS-in-JSのようなランタイムのオーバーヘッドはありません。

シンプルだけどキレイ

多くの標準的なウェブサイトに馴染むように馴染むようにデザインされていますが、大胆にカスタマイズすることもできます。

目新しさより実用性

Camome UIは新しいスタイリング方法を提唱するフレームワークではありません。これまでの書き方でOK。

30%OFF2 rooms left

Sheraton Okinawa Sunmarina Resort

1 night, 2 adults

¥62,000

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>
  );
}

カスタムテーマに対応

デフォルトテーマは汎用性を重視しています。あなたのサイトにピッタリのデザインにカスタマイズしましょう。

Jean Doe

@jean_doePro

Lorem 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%
  );
}

確実に上書き。

!important なしで

全てのCSSは @layer の中に閉じられているので、宣言順や詳細度を気にせず上書きできます。

新しいプロジェクトをここから始めよう。

丁寧に設計されたデザインシステムとコンポーネントが開発を加速します。

はじめる GitHub