Getting Started with Hono

Install Packages

First, create your application.

Execute one of the following commands in your terminal.

pnpm create hono

Copied!

Install the required packages.

pnpm add react react-dom

Copied!

pnpm add -D @types/react @types/react-dom @hono/vite-dev-server vite

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 a convenient table component using @tanstack/react-table.
	@yamada-ui/calendar	Provides convenient calendar and date picker components using dayjs.
	@yamada-ui/carousel	Provides a convenient carousel component using embla-carousel-react.
	@yamada-ui/dropzone	Provides a convenient dropzone component using react-dropzone.
	@yamada-ui/charts	Provides convenient chart components using recharts.
	@yamada-ui/markdown	Provides a convenient markdown component using react-markdown and react-syntax-highlighter.
	@yamada-ui/fontawesome	Provides components for conveniently using Font Awesome.

To install individual components or hooks for improved performance, please check here.
If you want to use only the Yamada UI style system, please check here.

Setup

Change index.ts to index.tsx and also change the content.

index.tsx

import {
  ColorModeScript,
  ThemeSchemeScript,
  defaultConfig,
} from "@yamada-ui/react"
import { Hono } from "hono"
import { getCookie } from "hono/cookie"
import { renderToString } from "react-dom/server"

const app = new Hono()

app.get("*", (c) => {
  const colorMode = getCookie(c, "ui-color-mode") as
    | ColorModeWithSystem
    | undefined
  const themeScheme = getCookie(c, "ui-theme-scheme")

  const initialColorMode = colorMode ?? config.initialColorMode
  const initialThemeScheme = themeScheme ?? config.initialThemeScheme

  return c.html(
    renderToString(
      <html lang="ja">
        <head>
          <script type="module" src="/src/client.tsx"></script>
        </head>

        <body>
          <ColorModeScript
            type="cookie"
            nonce="testing"
            initialColorMode={initialColorMode}
          />
          <ThemeSchemeScript
            type="cookie"
            nonce="testing"
            initialThemeScheme={initialThemeScheme}
          />
          <div id="root"></div>
        </body>
      </html>,
    ),
  )
})

export default app

Copied!

The reason for adding ColorModeScript and ThemeSchemeScript to index.tsx is to prevent the screen from flashing when a page rendered on the server-side is sent to the client, especially when dark mode is being used.

Change the content of package.json.

package.json

{
  "type": "module",
  "scripts": {
    "dev": "vite"
  }
  // ...
}

Copied!

Change "jsxImportSource" in tsconfig.json to "react".

tsconfig.json

{
  "compilerOptions": {
    "jsxImportSource": "react"
    // ...
  }
}

Copied!

Add vite.config.ts.

vite.config.ts

import devServer, { defaultOptions } from "@hono/vite-dev-server"
import { defineConfig } from "vite"

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: "./src/client.tsx",
          output: {
            entryFileNames: "static/client.js",
          },
        },
      },
    }
  } else {
    return {
      ssr: {
        external: ["react", "react-dom"],
      },
      plugins: [
        devServer({
          exclude: ["/*", ...defaultOptions.exclude],
          entry: "src/index.tsx",
        }),
      ],
    }
  }
})

Copied!

Add `UIProvider`

After installing Yamada UI, add UIProvider.

client.tsx

import { UIProvider } from "@yamada-ui/react"
import { createRoot } from "react-dom/client"
import App from "./app"

const domNode = document.getElementById("root")!
const root = createRoot(domNode)
root.render(
  <UIProvider>
    <App />
  </UIProvider>,
)

Copied!

The Default Theme is included within UIProvider.

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

Use Components

Once you've added UIProvider, you can start using components within your application.

app.tsx

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

const App: FC = () => {
  return <Button>Click me!</Button>
}

export default App

Copied!

Edit this page on GitHub

PreviousGatsby NextStyled System

Getting Started with Hono

Setup

Add UIProvider

Use Components

Add `UIProvider`