@hone-ui/react

React components with the familiar props and theme API. React Aria Components handle behaviour and accessibility, and styles ship as plain CSS that reads theme values from CSS variables.

Pre-release. Full docs, with examples and props for each component: https://hone-ui-docs.vercel.app

Install

npm install @hone-ui/react react-aria-components
npm install -D @hone-ui/sx

React 19 and react-aria-components 1.21 or later are required.

Set up

Add the @hone-ui/sx plugin so sx compiles to CSS. In Vite, list it before react():

// vite.config.ts
import react from '@vitejs/plugin-react';
import sx from '@hone-ui/sx/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [sx(), react()] });

In Next.js, wrap your existing config and turn on optimizePackageImports:

// next.config.ts
import { withSx } from '@hone-ui/sx/next';

export default withSx({
  experimental: { optimizePackageImports: ['@hone-ui/react'] },
});

Import one look at your app's root, after your own global CSS. Unlayered CSS beats the library, so delete the template's index.css, App.css and globals.css resets, or put them in an earlier @layer.

import './globals.css'; // your own CSS, if you keep any
import '@hone-ui/react/styles/material.css'; // or minimal.css

Wrap the app in ThemeProvider, and add CssBaseline for the page background and font. In Next.js, put the provider in a file marked 'use client'.

import { CssBaseline, createTheme, ThemeProvider } from '@hone-ui/react';

const theme = createTheme();

export function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* your app */}
    </ThemeProvider>
  );
}

Components

Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Box, Button, Card, Checkbox, Chip, CircularProgress, CssBaseline, Dialog, Divider, Drawer, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, IconButton, InputAdornment, InputLabel, LinearProgress, List, Menu, MenuItem, MenuList, Pagination, Paper, Radio, RadioGroup, Select, Skeleton, Slider, Snackbar, Stack, Switch, Table, Tabs, TextField, Toolbar, Tooltip and Typography, plus their parts such as DialogTitle and TableRow.

The package ships an AI guide for every component under @hone-ui/react/ai/, so coding assistants that read node_modules find them. Start at ai/index.md, which lists each guide in one line.