Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yamada-ui/yamada-ui
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.
https://github.com/yamada-ui/yamada-ui
a11y animation animation-css dark-mode emotion framer-motion react responsive-design ui ui-components ui-design ui-library uikit yamada-ui
Last synced: 4 days ago
JSON representation
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.
- Host: GitHub
- URL: https://github.com/yamada-ui/yamada-ui
- Owner: yamada-ui
- License: mit
- Created: 2022-10-06T13:31:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-21T22:40:14.000Z (11 days ago)
- Last Synced: 2025-01-22T08:42:51.984Z (10 days ago)
- Topics: a11y, animation, animation-css, dark-mode, emotion, framer-motion, react, responsive-design, ui, ui-components, ui-design, ui-library, uikit, yamada-ui
- Language: TypeScript
- Homepage: https://yamada-ui.com
- Size: 344 MB
- Stars: 865
- Watchers: 6
- Forks: 229
- Open Issues: 311
-
Metadata Files:
- Readme: README.ja.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.ja.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
English | 日本語
Yamada UIは、最先端のWebアプリケーションやウェブサイトの開発を効率化するReactのUIコンポーネントライブラリです。このライブラリは、他のReact UIコンポーネントライブラリでは提供されていない、カラーモードやアニメーションなどの様々な機能を提供しています。現代の複雑なユーザーインターフェースを構築するために、簡単に組み合わせることができるさまざまなコンポーネントを提供します。
## コンテンツ
- [リスペクト](#リスペクト)
- [ドキュメント](https://yamada-ui.com/ja)
- [特徴](#特徴)
- [インストール](#インストール)
- [使い方](#使い方)
- [CodeSandbox](#codesandbox)
- [Storybook](https://yamada-ui.github.io/yamada-ui/)
- [サポートする](#サポートする)
- [貢献する](#貢献する)
- [ライセンス](#ライセンス)
## リスペクト
Yamada UIは、[Chakra UI](https://github.com/chakra-ui/chakra-ui)、[MUI](https://github.com/mui/material-ui)、[Mantine UI](https://github.com/mantinedev/mantine)から多くのインスピレーションを得ています。これは、私の人生に素晴らしい経験をもたらしました。Segun Adebayoをはじめとするすべての神々に、そのような経験をもたらしてくださったことに深く感謝しています。そして、愛しています。
## ドキュメント
最新のバージョンのWebサイトは、https://yamada-ui.com です。
## 特徴
- スタイリングの簡単さ: Yamada UIには`Box`や`Stack`のようなレイアウトコンポーネントのセットが含まれており、`props`を通して簡単にコンポーネントをスタイルすることができます。
- フレキシブルかつ組み合わせ可能: Yamada UIのコンポーネントは、React UIプリミティブ上に構築されており、無限に組み合わせることが可能です。
- アニメーション: Yamada UIは、アニメーションを簡単に宣言できるフックやコンポーネントを提供しています。フックはCSSアニメーションに似た形式で記述することが可能で、全てのコンポーネントでサポートされています。
- カラーモード: Yamada UIは、全てのコンポーネントの`props`で各カラーモードの値を定義することができます。
- テーマの切り替え: Yamada UIは、ユーザーがテーマを切り替えることを可能にします。ユーザーは自身のテーマを適応させてWebアプリケーションやウェブサイトを使用することができます。
- その他の特徴: Yamada UIは、現代のウェブアプリケーションやウェブサイトにとって重要と考えられる、ローディング機能と通知機能を標準で提供しています。これにより、これらの機能を一つずつ開発する必要がなくなります。
## インストール
Yamada UIのコンポーネントを使用するためには、`@yamada-ui/react`をインストールするだけで十分です。
```sh
pnpm add @yamada-ui/react
# または
yarn add @yamada-ui/react
# または
npm install @yamada-ui/react
# または
bun add @yamada-ui/react
```
ただし、`@yamada-ui/table`や`@yamada-ui/calendar`などは、`@yamada-ui/react`には含まれていません。これらは別途インストールする必要があります。
```sh
# `@tanstack/react-table`を使用した、便利なテーブルコンポーネントを提供します。
pnpm add @yamada-ui/table
# 便利なカレンダーとデイトピッカーコンポーネントを提供します。
pnpm add @yamada-ui/calendar
# `embla-carousel-react`を使用した、便利なカルーセルコンポーネントを提供します。
pnpm add @yamada-ui/carousel
# `react-dropzone`を使用した、便利なドロップゾーンコンポーネントを提供します。
pnpm add @yamada-ui/dropzone
# `recharts`を使用した、便利なチャートコンポーネントを提供します。
pnpm add @yamada-ui/charts
# `react-markdown`と`react-syntax-highlighter`を使用した、便利なマークダウンコンポーネントを提供します。
pnpm add @yamada-ui/markdown
# `Lucide`を使用した、便利なアイコンコンポーネントを提供します。
pnpm add @yamada-ui/lucide
# `Font Awesome`を便利に使用するためのコンポーネントを提供します。
pnpm add @yamada-ui/fontawesome
```
## 使い方
コンポーネントの使用するには、以下の手順に従ってください。
1. パッケージで提供されている`UIProvider`を、あなたのアプリケーションをラップします。
```tsx
import { UIProvider } from "@yamada-ui/react"
const App = ({ children }) => {
return {children}
}
export default App
```
`Yamada UI`は、デフォルトでライトモードとダークモードをサポートしています。
2. これで、以下のようにコンポーネントを使用できます。
```tsx
import { Box, Text } from "@yamada-ui/react"
const Example = () => {
return (
ギャルのパンティーおくれーーーっ！！！！！
)
}
```
## CodeSandbox
- [JavaScript](https://codesandbox.io/p/devbox/yamada-ui-javascript-1m1on8)
- [TypeScript](https://codesandbox.io/p/devbox/yamada-ui-typescript-7xqli9)
- [Next.js - Pages](https://codesandbox.io/p/devbox/yamada-ui-next-js-pages-6d13de)
- [Next.js - App](https://codesandbox.io/p/devbox/yamada-ui-next-js-app-3911zu)
## サポートする
ぜひ、このプロジェクトをサポートしてください！ あなたのアイコンや組織のロゴがWebサイトのリンクとともに、こちらに表示されます。ご支援のほど、宜しくお願いいたします。 [[貢献する](https://opencollective.com/yamada-ui/contribute)]
### 組織
### 個人
## 貢献する
貢献したいと思いませんか？ それは、とても素晴らしいことです！
あなたを支援するために[ガイドライン](./CONTRIBUTING.ja.md)を準備しています。
もし、ドキュメントへの貢献に興味がある場合は、こちらの[ガイドライン](https://yamada-ui.com/ja/community/contributing)を参照してください。
## ライセンス
MIT © [Hirotomo Yamada](https://github.com/hirotomoyamada)