- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Card
- Checkbox
- Collapsible
- Combobox
- Context Menu
- Date Picker (Lite)
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP (Lite)
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
Introduction
shadcnui-hono-jsx is shadcn/ui for Hono JSX. The same components, design tokens and presets, rendered on the server without React.
This is not a component library. It is how you build your component library, in Hono JSX.
shadcn/ui hands you the source of beautifully designed, accessible components instead of a package to import. shadcnui-hono-jsx brings that approach to Hono JSX and HonoX: the components are translated from the upstream shadcn/ui registry into plain hono/jsx function components, and a CLI copies them into your project, styled by a preset from Create.
This is an unofficial community project. It is not affiliated with, maintained by, or endorsed by shadcn or the shadcn/ui project. Compatibility with shadcn/ui is partial; see Compatibility.
It is built around the same principles as shadcn/ui:
- Open Code: The components are copied into your project. Edit them like any other file.
- Composition: Every component keeps upstream's composable API: the same parts, props and
data-slotattributes. - Distribution: A CLI installs components and their dependencies, and rewrites them when you change the preset.
- Beautiful Defaults: The styles are upstream's, in every Base UI style of shadcn/ui.
Hono JSX, not React on Hono
There is no React, React DOM, Base UI or Radix runtime anywhere in the installed code. Components render HTML on the server:
- Server-rendered: Render them with
c.html(...),jsxRendereror HonoX routes. - The platform first: Dialog is a native
<dialog>, Popover uses thepopoverattribute, Select is a customizable native<select>, and Accordion is<details>. Most components need no JavaScript at all. - Optional scripts: Where the browser lacks a behavior (keyboard navigation in Tabs, menus, toasts), a small dependency-free module script adds it. See Client Scripts.
Generated from upstream
The components are not a hand-maintained fork. A generator translates the upstream shadcn/ui registry into Hono JSX for every Base UI style, and a weekly workflow proposes upstream changes as pull requests. The examples on this site are translated the same way from the shadcn/ui documentation.
Presets from Create
Pick a style, colors, radius, fonts, an icon library and the menu color on the Create page, or on ui.shadcn.com/create: preset codes are the same. Then install it with one command:
pnpm dlx shadcnui-hono-jsx@latest init --preset b0npx shadcnui-hono-jsx@latest init --preset b0yarn dlx shadcnui-hono-jsx@latest init --preset b0bunx shadcnui-hono-jsx@latest init --preset b0Continue with Installation.