@serendie/ui
Advanced tools
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
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つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、data-panda-theme属性 (konjo, asagi, sumire, tsutusji, kurikawa)を付与することでカラーテーマを切り替えることができます。
各テーマについてはこちらを参照してください。
<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],
});
より実践的な例は、こちらのサンプルプロジェクトを参考にしてください。
Serendie UIはヘッドレスUIとして、Ark UIを内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIのAPIリファレンスを合わせて参照してください。
Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
npm run dev
npm run build
Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。
npm run connect:publish
storiesファイルに変更が入ると上記がGitHub Actionsによって実行されます。
Serendie Design Systemは、Serendie UI (本リポジトリ) のほか以下の関連リポジトリから構成されています。
| Package name | Location | Description |
|---|---|---|
@serendie/design-token | serendie/design-token | W3C Design Token Format Moduleの仕様で定義されたSerendie UIのベースとなるデザイントークン |
@serendie/symbols | serendie/symbols | Serendieらしい300種類以上のSVGアイコン集 |
@serendie/figma-utils | serendie/figma-utils | Figma REST APIを用いて、@serendie/design-tokenとFigma Variablesの同期を行うためのユーティリティー集 |
@serendie/style-dictonary-formatter | serendie/style-dictonary-formatter | デザイントークンを各プラットフォームに展開するためのamzn/style-dictonaryのフォーマッタ |
主要パッケージの導入サンプルとして、serendie/bootcampを用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。
Serendie Design Systemは三菱電機の有する多様な事業に適応することがコンセプトの一つです。
@serendie/desigon-tokenおよび@serendie/uiは、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けにserendie/subbrands-templateを整備しています。
詳しくはSerendie Design Systemチームまでお問い合わせください。
各パッケージはMITライセンスの下で配布されています。 詳しくはLICENSEを参照してください。
FAQs
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
We found that @serendie/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.