# @4design/for-ui

Latest version **1.1.11** (published 2024-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @4design/for-ui
pnpm add @4design/for-ui
yarn add @4design/for-ui
bun add @4design/for-ui
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.11 |
| Published | 2024-03-20 |
| First published | 2023-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 6 |
| Unpacked size | 320.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | locona |
| Maintainers | creatorqsf, locona |

## Links

- npm: https://www.npmjs.com/package/@4design/for-ui
- Repository: https://github.com/4-design/for-ui
- Issues: https://github.com/4-design/for-ui/issues
- npm.io page: https://npm.io/package/@4design/for-ui

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) 2.0.0
- [react-dropzone](https://npm.io/package/react-dropzone.md) 14.2.3
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) 1.14.0
- [react-number-format](https://npm.io/package/react-number-format.md) 5.3.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) 4.4.5
- [material-ui-popup-state](https://npm.io/package/material-ui-popup-state.md) 5.0.9

## Recent versions

- 1.1.11 (latest) — 2024-03-20
- 1.1.10 — 2024-01-09
- 1.1.9 — 2023-07-25
- 1.1.8 — 2023-07-13
- 1.1.7 — 2023-07-11
- 1.0.12-14b10ff44c590097de9b4971b4156e2550f0b534 — 2023-07-10
- 1.0.16-4955107391207339b472a808c3c100455fb77f54 — 2023-07-10
- 1.0.17-7a709d97b500007a64f419b41453d5a5c321b332 — 2023-07-10
- 1.0.18-6c856e2e538e15371a4a2a0aef63f6d0b891c0a8 — 2023-07-10
- 1.1.0-dc2f13a87a4cdfc054999a280d273403f530edd9 — 2023-07-10
- 1.1.2-d38141afc69c1342d8edf4c36db4af83b51cc7c1 — 2023-07-10
- 1.1.3-2c1f843bb924ddab6d772c930e600daac1bdf425 — 2023-07-10
- 1.1.4-2c1f843bb924ddab6d772c930e600daac1bdf425 — 2023-07-10
- 1.1.6 — 2023-07-10

## README

<h1 align="center">
  <img width="240" src="/.github/assets/fui_logo_logotype_light.svg#gh-light-mode-only" alt="For UI" title="For UI">
  <img width="240" src="/.github/assets/fui_logo_logotype_dark.svg#gh-dark-mode-only">
</h1>

<div align="center">

[![npm version](https://badge.fury.io/js/@4design%2Ffor-ui.svg)](https://badge.fury.io/js/@4design%2Ffor-ui)
[![CI](https://github.com/4-design/for-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/4-design/for-ui/actions/workflows/ci.yml)

</div>

For UI は <a href="https://3-shake.com">株式会社スリーシェイク</a>のデザインシステム「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` (名前は任意) を作成

  - 以下の内容を置く

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer base {
  body {
    @apply text-shade-dark-default text-r font-sans antialiased;
  }
}
```

- `app.tsx` で `global.css` を読み込む

#### `postcss.config.js` の作成

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

  - デフォルトの構成を自分で定義する必要があることに注意 ([参考](https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins))

- 以下を追加

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

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

#### preset の読み込み

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

#### 共通フォントの読み込み

```html
<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 設定

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

または

```js
important: true;
```

を指定

(複数の important が必要な場合は[こちら](https://github.com/4-design/for-ui/discussions/1093)を参考にしてください)

#### `tailwind.config.js` 設定例

```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.)

---
_Source: https://npm.io/package/@4design/for-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._