Getting Started with Remix

Install the package

First, create your application.

Execute one of the following commands in your terminal.

pnpm create remix my-app --typescript

Copied!

Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react.

pnpm add @yamada-ui/react

Copied!

If you want to use tables, calendars, carousels, etc., you need to install them separately.

pnpm add @yamada-ui/table

Copied!

	Package	Description
	@yamada-ui/table	Provides convenient table components using @tanstack/react-table.
	@yamada-ui/calendar	Provides convenient calendar and date picker components using dayjs.
	@yamada-ui/carousel	Provides convenient carousel components using embla-carousel-react.
	@yamada-ui/dropzone	Provides convenient dropzone components using react-dropzone.
	@yamada-ui/charts	Provides convenient chart components using recharts.
	@yamada-ui/markdown	Provides convenient markdown components using react-markdown and react-syntax-highlighter.
	@yamada-ui/fontawesome	Provides components for conveniently using Font Awesome.

For individual component and hook installation to improve performance, please check here.
If you only want to use the Yamada UI style system, please check here.

Add `UIProvider`

After installing Yamada UI, add UIProvider.

root.tsx

import { cssBundleHref } from "@remix-run/css-bundle"
import type { LinksFunction } from "@remix-run/node"
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react"
import { UIProvider } from "@yamada-ui/react"

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <UIProvider>
          <Outlet />
        </UIProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

Copied!

The Default Theme is included within UIProvider.

If you want to customize the theme or config, please check Customize Theme and Customize Config.

Add `ColorModeScript`

To make the color mode work properly, you need to add ColorModeScript inside the body.

This is because the color mode is implemented using localStorage or cookies, and it needs to synchronize correctly at page load.

root.tsx

import { cssBundleHref } from "@remix-run/css-bundle"
import type { LinksFunction } from "@remix-run/node"
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react"
import { UIProvider } from "@yamada-ui/react"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ColorModeScript initialColorMode={defaultConfig.initialColorMode} />
        <UIProvider>
          <Outlet />
        </UIProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

Copied!

For props' initialColorMode, please pass the same initialColorMode as your config. If you have your own config, pass its initialColorMode.

Adding a `colorModeManager`

For sites rendered on the server side, such as Remix, you might want to include the color mode in the request to avoid changing it during hydration.

If you're not using server-side rendering, you don't need to follow these steps. Yamada UI uses localStorage by default.

Getting `cookies`

To get cookies, you use useLoaderData.

root.tsx

import { cssBundleHref } from "@remix-run/css-bundle"
import type { LinksFunction } from "@remix-run/node"
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react"
import { UIProvider } from "@yamada-ui/react"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"
import { json, LoaderFunction } from "@remix-run/node"

export const loader: LoaderFunction = async ({ request }) => {
  const cookies = request.headers.get("Cookie")

  return json({ cookies })
}

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

export default function App() {
  const { cookies } = useLoaderData<{ cookies: string }>()

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ColorModeScript
          type="cookie"
          nonce="testing"
          initialColorMode={defaultConfig.initialColorMode}
        />
        <UIProvider>
          <Outlet />
        </UIProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

Copied!

Set `cookies` to `colorModeManager`

Set ssr and cookies to createColorModeManager.

root.tsx

import { cssBundleHref } from "@remix-run/css-bundle"
import type { LinksFunction } from "@remix-run/node"
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react"
import { UIProvider, createColorModeManager } from "@yamada-ui/react"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"
import { json, LoaderFunction } from "@remix-run/node"

export const loader: LoaderFunction = async ({ request }) => {
  const cookies = request.headers.get("Cookie")

  return json({ cookies })
}

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

export default function App() {
  const { cookies } = useLoaderData<{ cookies: string }>()

  const colorModeManager = createColorModeManager("ssr", cookies)

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ColorModeScript
          type="cookie"
          nonce="testing"
          initialColorMode={defaultConfig.initialColorMode}
        />
        <UIProvider colorModeManager={colorModeManager}>
          <Outlet />
        </UIProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

Copied!

Use Components

After adding UIProvider, you can call components within your application.

route.tsx

import { Button } from "@yamada-ui/react"

export default function Home() {
  return <Button>Click me!</Button>
}

Copied!

Edit this page on GitHub

PreviousVite NextGatsby

Getting Started with Remix

Add UIProvider

Add ColorModeScript

Adding a colorModeManager

Getting cookies

Set cookies to colorModeManager

Use Components

Add `UIProvider`

Add `ColorModeScript`

Adding a `colorModeManager`

Getting `cookies`

Set `cookies` to `colorModeManager`