React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.
MIT License
Yamada UIは、最先端のWebアプリケーションやウェブサイトの開発を効率化するReactのUIコンポーネントライブラリです。このライブラリは、他のReact UIコンポーネントライブラリでは提供されていない、カラーモードやアニメーションなどの様々な機能を提供しています。現代の複雑なユーザーインターフェースを構築するために、簡単に組み合わせることができるさまざまなコンポーネントを提供します。
Yamada UIは、Chakra UI、MUI、Mantine UIから多くのインスピレーションを得ています。これは、私の人生に素晴らしい経験をもたらしました。Segun Adebayoをはじめとするすべての神々に、そのような経験をもたらしてくださったことに深く感謝しています。そして、愛しています。
最新のバージョンのWebサイトは、https://yamada-ui.com です。
Box
やStack
のようなレイアウトコンポーネントのセットが含まれており、props
を通して簡単にコンポーネントをスタイルすることができます。props
で各カラーモードの値を定義することができます。Yamada UIのコンポーネントを使用するためには、@yamada-ui/react
をインストールするだけで十分です。
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
には含まれていません。これらは別途インストールする必要があります。
# `@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
コンポーネントの使用するには、以下の手順に従ってください。
UIProvider
を、あなたのアプリケーションをラップします。import { UIProvider } from "@yamada-ui/react"
const App = ({ children }) => {
return <UIProvider>{children}</UIProvider>
}
export default App
Yamada UI
は、デフォルトでライトモードとダークモードをサポートしています。
import { Box, Text } from "@yamada-ui/react"
const Example = () => {
return (
<Box>
<Text>ギャルのパンティーおくれーーーっ!!!!!</Text>
</Box>
)
}
ぜひ、このプロジェクトをサポートしてください! あなたのアイコンや組織のロゴがWebサイトのリンクとともに、こちらに表示されます。ご支援のほど、宜しくお願いいたします。 [貢献する]
貢献したいと思いませんか? それは、とても素晴らしいことです!
あなたを支援するためにガイドラインを準備しています。
もし、ドキュメントへの貢献に興味がある場合は、こちらのガイドラインを参照してください。
MIT © Hirotomo Yamada