Stats
Links
Categories
Marketplace
serendie
$
npx claudepluginhub serendie/serendie1 Plugin
serendie
53·
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
3d
serendienpx claudepluginhub serendie/serendieAdaptive UI component library as part of Serendie Design System by Mitsubishi Electric
serendie
Serendie Design Systemは、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。
デザイントークンやSerendie Symbolsなど複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。
Serendie UI Kit (Figma)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容がFigma Devモードでも確認できます。
デザイントークンも同梱されます。
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の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の設定に応じてライト/ダークモードが自動的に切り替わります。
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の例を紹介します。
Panda CSS導入後に生成されるpanda.config.tsに下記を追記することで、Panda CSSのPresetとSerendie Design Systemのデザイントークンを繋ぎこみます。
+import { SerendiePreset } from "@serendie/ui";
export default defineConfig({
+ jsxFramework: "react",
+ presets: [SerendiePreset],
});