Skip to content

Latest commit

 

History

History
161 lines (111 loc) · 7.64 KB

README.ja.md

File metadata and controls

161 lines (111 loc) · 7.64 KB
Raw

Yamada UI

NPM Minzip MIT License NPM Downloads MIT License Github Stars MIT License

English | 日本語

Yamada UIは、最先端のWebアプリケーションやウェブサイトの開発を効率化するReactのUIコンポーネントライブラリです。このライブラリは、他のReact UIコンポーネントライブラリでは提供されていない、カラーモードやアニメーションなどの様々な機能を提供しています。現代の複雑なユーザーインターフェースを構築するために、簡単に組み合わせることができるさまざまなコンポーネントを提供します。

コンテンツ

リスペクト

Yamada UIは、Chakra UI、MUI、Mantine UIから多くのインスピレーションを得ています。これは、私の人生に素晴らしい経験をもたらしました。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をインストールするだけで十分です。

$ pnpm add @yamada-ui/react

# または

$ yarn add @yamada-ui/react

# または

$ npm install @yamada-ui/react

ただし、@yamada-ui/tableや@yamada-ui/calendarなどは、@yamada-ui/reactには含まれていません。これらは別途インストールする必要があります。

# `@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

# `Font Awesome`を便利に使用するためのコンポーネントを提供します。
$ pnpm add @yamada-ui/fontawesome

使い方

コンポーネントの使用するには、以下の手順に従ってください。

  1. パッケージで提供されているUIProviderを、あなたのアプリケーションをラップします。
import { UIProvider } from "@yamada-ui/react"

const App = ({ children }) => {
  return <UIProvider>{children}</UIProvider>
}

export default App

Yamada UIは、デフォルトでライトモードとダークモードをサポートしています。

  1. これで、以下のようにコンポーネントを使用できます。
import { Box, Text } from "@yamada-ui/react"

const Example = () => {
  return (
    <Box>
      <Text>ギャルのパンティーおくれーーーっ！！！！！</Text>
    </Box>
  )
}

CodeSandbox

サポートする

ぜひ、このプロジェクトをサポートしてください！ あなたのアイコンや組織のロゴがWebサイトのリンクとともに、こちらに表示されます。ご支援のほど、宜しくお願いいたします。 [貢献する]

組織

個人

貢献する

貢献したいと思いませんか？ それは、とても素晴らしいことです！

あなたを支援するためにガイドラインを準備しています。

もし、ドキュメントへの貢献に興味がある場合は、こちらのガイドラインを参照してください。

ライセンス

MIT © Hirotomo Yamada