Name: serendie
Author: serendie

Serendie Design Systemは三菱電機によるオープンなデザインシステムです。
デザイントークンやSerendie Symbolsなど複数のリポジトリから構成されています。本リポジトリはSerendie UIを扱います。

Serendie UI

次のような特徴を持つ、ReactベースのUIコンポーネントライブラリです。

🎨デザイントークンやUIコンポーネントはSerendie UI Kit (Figma)に対応し、デザインと開発でSingle Source of Truthを実現
🌈5つの組み込みカラーテーマやカスタムテーミングに対応
🌙ダークモード対応
🌐多言語対応(日英)
🤖MCPサーバーやAgent Skillsを提供

使い方

インストール

デザイントークンも同梱されます。

npm install @serendie/ui

プロジェクトへの導入

rootのCSSに対して下記を指定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。

@layer reset, base, tokens, recipes, utilities;
@import "@serendie/ui/styles.css";

コンポーネントを使う

各Componentのpropsについては、ドキュメントや、Storybook、Figma Code Connectを参照してください。

import { Button } from "@serendie/ui";

<Button size="medium">Login</Button>;

Next.js App Routerでの使用

Next.js App RouterのServer Componentから使用する場合は、@serendie/ui/clientからインポートすることで、use clientディレクティブを記述する必要がなくなります。

// app/page.tsx - Server Component
import { Button } from "@serendie/ui/client";

export default function Page() {
  return <Button size="medium">Login</Button>;
}

Client Componentでも同様に使用できます：

// app/client-component.tsx - Client Component
"use client";
import { Tabs, TabItem, ModalDialog } from "@serendie/ui/client";

export default function ClientComponent() {
  // インタラクティブなコンポーネントも問題なく動作します
  return <Tabs defaultValue="tab1">...</Tabs>;
}

テーマ切り替え

Serendie Design Systemには5つのカラーテーマ (konjo, asagi, sumire, tsutsuji, kurikawa) とダークモードがあります。各テーマについてはこちらを参照してください。

SerendieProviderのcolorThemeとcolorModeを使って、テーマとカラーモードを設定できます。

import { SerendieProvider } from "@serendie/ui";

function App() {
  return (
    <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
      {/* アプリケーション全体 */}
    </SerendieProvider>
  );
}

colorTheme: カラーテーマ（konjo | asagi | sumire | tsutsuji | kurikawa、デフォルト: konjo）
colorMode: カラーモード（system | light | dark、デフォルト: light）

colorMode="system"を指定すると、OSの設定に応じてライト/ダークモードが自動的に切り替わります。

FOUC（フラッシュ）の防止

SSR環境（Next.jsなど）では、ページ読み込み時にテーマが一瞬ちらつく（FOUC）ことがあります。ColorSchemeScriptを<head>内に配置することで、HTMLの描画前にテーマを適用しFOUCを防止できます。

// Next.js App Router: app/layout.tsx
import { SerendieProvider, ColorSchemeScript } from "@serendie/ui";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
      <html suppressHydrationWarning>
        <head>
          <ColorSchemeScript />
        </head>
        <body>{children}</body>
      </html>
    </SerendieProvider>
  );
}

SerendieProviderを<html>の外側に配置することで、ColorSchemeScriptはContextからテーマ設定を自動取得します。テーマの設定を1箇所にまとめられるため、値の不整合を防ぐことができます。

SerendieProviderを使わない場合や、ColorSchemeScriptをProvider外で使う場合は、propsで直接指定することもできます。

<ColorSchemeScript colorTheme="konjo" colorMode="system" />

`data-panda-theme`属性による直接制御

SerendieProviderを使用せずに、data-panda-theme属性を直接設定してテーマを切り替えることもできます。

<html data-panda-theme="asagi"></html>

スタイリングライブラリと併用する

マージンを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用しているPanda CSSの例を紹介します。

serendie

Popularity

What's Inside

README

Serendie UI

使い方

インストール

プロジェクトへの導入

コンポーネントを使う

Next.js App Routerでの使用

テーマ切り替え

FOUC（フラッシュ）の防止

`data-panda-theme`属性による直接制御

スタイリングライブラリと併用する

SerendiePresetの追加

Confidence

Similar Plugins

ui-design-system

typeui

ui-ux-pro-max

atlas

lookbook

mui-expert

Popularity

Health & Quality

Similar Plugins

ui-design-system

typeui

ui-ux-pro-max

atlas

lookbook

mui-expert

serendie

Popularity

What's Inside

README

Serendie UI

使い方

インストール

プロジェクトへの導入

コンポーネントを使う

Next.js App Routerでの使用

テーマ切り替え

FOUC（フラッシュ）の防止

data-panda-theme属性による直接制御

スタイリングライブラリと併用する

SerendiePresetの追加

Confidence

Similar Plugins

ui-design-system

typeui

ui-ux-pro-max

atlas

lookbook

mui-expert

Popularity

Health & Quality

Similar Plugins

ui-design-system

typeui

ui-ux-pro-max

atlas

lookbook

mui-expert

`data-panda-theme`属性による直接制御