Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

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!
PackageDescription
@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.

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")
  const themeScheme = getCookie(c, "ui-theme-scheme")


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


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


export default app
Copied!

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!

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

PreviousGatsbyNextStyled System