Skip to content

株式会社スリーシェイクのデザインシステム「For Design System https://for-design-system.pages.dev 」のデザイントークンとコンポーネントライブラリを実装したパッケージ

Notifications You must be signed in to change notification settings

4-design/for-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

876faaa · May 28, 2024
Mar 29, 2024
Mar 27, 2024
Sep 17, 2022
Mar 29, 2024
Mar 29, 2024
May 28, 2024
May 28, 2024
Mar 8, 2023
Jan 12, 2023
Mar 20, 2024
Mar 17, 2022
May 28, 2024
Oct 11, 2022
May 8, 2023
Jul 13, 2023
Mar 29, 2024
Mar 29, 2024
Apr 19, 2023
Mar 22, 2023

Repository files navigation

For UI

npm version CI

For UI は 株式会社スリーシェイクのデザインシステム「For Design System」のデザイントークンとコンポーネントライブラリを実装したパッケージです。

React と MUI と Tailwind CSS で作られています。

インストール

npm i @4design/for-ui

Peer dependencies のインストール

npm i tailwindcss @mui/lab @mui/material @mui/base react-icons react @tanstack/react-table
npm i --save-dev @types/react

セットアップ

1. Tailwind CSS を導入

Tailwind CSS の CSS を読み込む

  • global.css (名前は任意) を作成

    • 以下の内容を置く
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer base {
  body {
    @apply text-shade-dark-default text-r font-sans antialiased;
  }
}
  • app.tsxglobal.css を読み込む

postcss.config.js の作成

  • postcss.config.js が存在しない場合は作成する。

    • デフォルトの構成を自分で定義する必要があることに注意 (参考)
  • 以下を追加

plugins: {
  tailwindcss: {},
  autoprefixer: {},
  // ...
}

2. For UI の設定を読み込む

preset の読み込み

preset: [require('@4design/for-ui/tailwind.config.base.js')],

共通フォントの読み込み

<link
  href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap"
  rel="stylesheet"
/>

またはこれに相当するものを置いてください

MUI のスタイル上書きのための important 設定

important: #root, // 任意の上位セレクタを指定する

または

important: true;

を指定

(複数の important が必要な場合はこちらを参考にしてください)

tailwind.config.js 設定例

module.exports = {
  important: ':is(#__next, .MuiPopover-root)',
  presets: [require('@4design/for-ui/tailwind.config.base.js')],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@4design/for-ui/dist/**/*.js',
  ],
  plugins: [],
};

詳細は /example 以下に実装例があるので参考にしてください。

License

MIT License

Author

4 design (3-shake Inc.)