Version 0.2.0 is on npm

The component APIyou already know,compiled to plain CSS.

Hone UI is a free, MIT-licensed React library on React Aria. Click any component in your running app, change it, and the editor writes the change to your source file.

npm install @hone-ui/react
Read the docsView on npm

The visual editor in a running app: pick a button, change its variant, and the panel saves it to the source file.

Edit the page. Keep the code.

The visual editor runs inside your app in development and saves every change back to the file it came from.

  1. Click any component

    Press Alt+Shift+E in development. Hover outlines the nearest component, and a click opens its panel.

  2. Change it live

    Pick a variant, flip a switch, edit an sx value. Your dev server repaints the page as you go.

  3. It writes your code

    Every change lands in the JSX of your source file. Ctrl+Z undoes the last save.

Development only

Add one component near the root. Production builds strip the editor, so your users download none of it.

app/providers.tsx
import { DevEditor } from '@hone-ui/editor'; <ThemeProvider theme={theme}>  {children}  <DevEditor /></ThemeProvider>

Two looks. One markup.

Every component renders the same HTML. The look is a stylesheet, so switching it changes nothing in your code. Try it on this page.

Watch the fields: Material floats the label inside, Minimal puts it above.

Invite a teammateThey get access to this workspace.
Team3 members, 1 pending
  • AO
    Ada Okaforada@studio.dev
    Owner
  • LP
    Lin Parklin@studio.dev
    Editor
  • SO
    Sam Ortizsam@studio.dev
    Viewer

Seats

12 of 20

Editors
Active this week

Storage

64% used

Write sx. Ship a class.

A build plugin compiles every static sx prop to a class and a stylesheet. Nothing computes styles in the browser.

You write
<Box  sx={{    p: 3,    borderRadius: 2,    bgcolor: 'primary.main',    color: 'primary.contrastText',    fontWeight: 600,    transition: 'transform 200ms',    '&:hover': { transform: 'translateY(-4px)' },  }}>  Compiled at build time</Box>
The build emits
Reading the compiled rule from this page…
Compiled at build time

The rule above is read live from this page's stylesheets. Theme keys compile to the look's CSS variables, so the box follows the look and the mode you picked.

Keyboard and screen readers, handled.

React Aria drives focus, keyboard and ARIA for every interactive component. Labels link to their fields and errors are announced.

You can change this later.

Put the mouse down

Tab
moves to the next control
Arrows
pick a plan inside the radio group
Space
ticks the checkbox
Enter
opens the menu and picks an option
Esc
closes the menu without a change

Component tests run an accessibility audit in a real browser, and any violation fails the run.

Guides your coding agent can read.

80 short guides ship inside the package. They match the version you installed and work offline.

node_modules/@hone-ui/react/dist/ai/
  • Button.md
  • Select.md
  • TextField.md
  • theming.md
  • system.md
  • and 73 more
Props
Every prop, its type and its default.
Do and don't
Code to copy, and the wrong code to avoid.
Accessibility
What to label and how the component announces itself.

Agents that read the web get the same content from the docs site, as one llms.txt index.

Open llms.txt

Or own the source.

Install the package, or copy components into your repo with the CLI and edit them like your own.

npx hone-ui init

Writes hone-ui.json, which names your look and the folder for copied files, and a hone-ui.css that loads the look's theme variables.

Swap the import. Keep the props.

npm install @hone-ui/react
Get started