Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

最小限のインストール

パッケージをインストールする

Yamada UIのコアやユーティリティをインストールします。

ターミナルで次のコマンドのいずれかを実行します。

pnpm add @yamada-ui/core @yamada-ui/utils
Copied!

uiを使用する

インストール後、アプリケーション内でuiを呼び出します。

uiは、Yamada UIのスタイルシステムを有効にしたJSX要素のオブジェクトであり、カスタムコンポーネントがYamada UIのスタイルシステムを受け取るための関数としても使用できます。

ui.の記法を使用して、スタイルシステムを備えた基本のHTML要素を生成します。
例えば、スタイルシステムを備えたプレーンなHTML要素のdivを生成する場合は、と記述します。

import { ui } from "@yamada-ui/core"


const Demo = () => {
  return (
    <ui.div>
      <ui.p>This is div</ui.p>
    </ui.div>
  )
}
Copied!

スタイルを設定するには、propsを渡します。

今回は、buttonでやってみましょう。

編集可能な例

<ui.button
  background="#ef4444"
  color="#ffffff"
  padding="1rem"
  borderRadius=".5rem"
  _hover={{ background: "#dc2626" }}
>
  Click me!
</ui.button>
Copied!

コンポーネントを作る

uiは、JSX要素のとJSX要素を返す関数のui('div')と2つの使い方ができます。

関数は、簡単なコンポーネントを生成するのに適しています。

import { ui } from "@yamada-ui/core"


const Button = ui("button")


const Demo = () => {
  return <Button>Click me!</Button>
}
Copied!

デフォルトのスタイルを設定することもできます。

import { ui } from "@yamada-ui/core"


const Button = ui("button", {
  baseStyle: {
    background: "#ef4444",
    color: "#ffffff",
    padding: "1rem",
    borderRadius: ".5rem",
    _hover: { background: "#dc2626" },
  },
})


const Demo = () => {
  return <Button>Click me!</Button>
}
Copied!

アニメーションを使用したい場合

Yamada UIは、アニメーションに特化したコンポーネントのMotionやCSSのkeyframesのように記述できるuseAnimationなど、多くのユーティリティを提供しています。

useAnimationを使う

@yamada-ui/use-animationをインストールします。

pnpm add @yamada-ui/use-animation
Copied!

編集可能な例

const animation = useAnimation({
  keyframes: {
    "0%": {
      bg: "#ef4444",
    },
    "20%": {
      bg: "#22c55e",
    },
    "40%": {
      bg: "#a855f7",
    },
    "60%": {
      bg: "#eab308",
    },
    "80%": {
      bg: "#3b82f6",
    },
    "100%": {
      bg: "#ef4444",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <ui.div w="full" h="xs" animation={animation} />
Copied!

Motionを使う

@yamada-ui/motionをインストールします。

pnpm add @yamada-ui/motion
Copied!

編集可能な例

<ui.div
  display="flex"
  placeContent="center"
  placeItems="center"
  w="100%"
  h="24rem"
>
  <Motion
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 180, 180, 0],
      borderRadius: ["0%", "0%", "50%", "50%", "0%"],
    }}
    transition={{
      duration: 2,
      ease: "easeInOut",
      times: [0, 0.2, 0.5, 0.8, 1],
      repeat: Infinity,
      repeatDelay: 1,
    }}
    w="7.5rem"
    h="7.5rem"
    bg="primary"
  />
</ui.div>
Copied!

色やスペースなどのトークンを使用したい場合

Yamada UIのデフォルトのテーマを使用したい場合は、@yamada-ui/themeをインストールします。

pnpm add @yamada-ui/theme
Copied!

テーマをインストール後、アプリケーションのルートにThemeProvider, ResetStyle, GlobalStyleを追加し、@yamada-ui/themeからデフォルトのテーマとデフォルトのコンフィグを渡します。もし、あなたのテーマやコンフィグがある場合は、そちらを渡します。

import { ThemeProvider, ResetStyle, GlobalStyle } from "@yamada-ui/core"
import { baseTheme, defaultConfig } from "@yamada-ui/theme"


const App = () => {
  return (
    <ThemeProvider theme={baseTheme} config={defaultConfig}>
      <ResetStyle />
      <GlobalStyle />


      <YourApplication />
    </ThemeProvider>
  )
}
Copied!

ダークモードを対応させたい場合は、ColorModeProviderも追加します。

import {
  ThemeProvider,
  ColorModeProvider,
  ResetStyle,
  GlobalStyle,
} from "@yamada-ui/core"
import { baseTheme, defaultConfig } from "@yamada-ui/theme"


const App = () => {
  return (
    <ThemeProvider theme={baseTheme} config={defaultConfig}>
      <ColorModeProvider config={defaultConfig}>
        <ResetStyle />
        <GlobalStyle />


        <YourApplication />
      </ColorModeProvider>
    </ThemeProvider>
  )
}
Copied!

学習を開始する

Yamada UIを知るために、基本やテーマを学んでみませんか？😎

基本を学ぶ

3分間のチュートリアルを読んで、Yamada UIのテーマ・スタイル・レスポンシブ・ダークモード・アニメーションの基本を学ぶ。

テーマについて学ぶ

Yamada UIのデフォルトのテーマを知り、色・フォント・その他のテーマの値を作成・変更する方法を学ぶ。

コンポーネントを探索する

Yamada UIは、100以上の柔軟性が高いコンポーネントを提供しています。すべてのコンポーネントは、アニメーション・ダークモードをサポートしています。

ソースコードを探索する

Yamada UIのパッケージ・ドキュメントサイトはオープンソースです。Yamada UIを気に入ったら、スターを付けてください。

GitHubでこのページを編集する

前はじめる次基本を学ぶ