GitHub
New

Installation

PreviousNext

How to install the theme and components in your Hono project.

Choose the setup that matches your project.

Hono

Plain Hono on Bun, Node.js or Cloudflare Workers, with the Tailwind CLI.

HonoX

HonoX with Vite and @tailwindcss/vite.

Requirements

  • Hono 4.12.34 or newer (JSX security fixes; 4.13.9 or newer is recommended), with "jsx": "react-jsx" and "jsxImportSource": "hono/jsx" in tsconfig.json.
  • Tailwind CSS v4.
  • Bun or Node.js 20 or newer to run the CLI. It runs with npx, pnpm dlx, yarn dlx or bunx and is not added to your dependencies.

What init does

Run init once, in the root of your project:

pnpm dlx shadcnui-hono-jsx@latest init --preset b0

It writes:

FileContent
shadcnui-hono-jsx.jsonThe preset and the --rtl and --pointer options.
styles/shadcn/theme.cssThe preset's CSS variables, fonts and Tailwind theme.
styles/shadcn/tailwind.cssshadcn/ui's Tailwind utilities and variants.
LICENSE-shadcnui-hono-jsx.txtThe license notices of the installed sources and icons.

and installs tw-animate-css and the preset's fonts (@fontsource-variable/*) with your package manager. The theme comes from ui.shadcn.com, like with shadcn init, so init needs network access.

Components go to components/ui/<name>.tsx with add, together with the components they import:

pnpm dlx shadcnui-hono-jsx@latest add button card

Import them with a path alias ("paths": { "@/*": ["./*"] } in tsconfig.json) or a relative path:

import { Button } from "@/components/ui/button"

Keep LICENSE-shadcnui-hono-jsx.txt with the installed sources when you copy or redistribute them.