Getting Started with Hono
Install Packages
First, create your application.
Execute one of the following commands in your terminal.
pnpm create hono
Install the required packages.
pnpm add react react-dom
pnpm add -D @types/react @types/react-dom @hono/vite-dev-server vite
Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react
.
pnpm add @yamada-ui/react
If you want to use tables, calendars, carousels, etc., you need to install them separately.
pnpm add @yamada-ui/table
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")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><ColorModeScripttype="cookie"nonce="testing"initialColorMode={colorMode ?? defaultConfig.initialColorMode}/><ThemeSchemeScripttype="cookie"nonce="testing"initialThemeScheme={themeScheme ?? defaultConfig.initialThemeScheme}/><div id="root"></div></body></html>,),)})export default app
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"}// ...}
Change "jsxImportSource"
in tsconfig.json
to "react"
.
tsconfig.json
{"compilerOptions": {"jsxImportSource": "react"// ...}}
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",}),],}}})
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>,)
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
Edit this page on GitHub