Components

A page here shows the main variants, lists the props, and ends with notes on behavior.

Before you startCopy Anchor Link

Install the package and import one look at your app's root. The examples assume you did.

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

import '@hone-ui/react/styles/material.css'; // or minimal.css

Import a component from its own path or from the package root.

import Button from '@hone-ui/react/Button';
import { Button } from '@hone-ui/react';

To compile the sx prop to static CSS, add the @hone-ui/sx plugin to your bundler. Without it, sx falls back to inline styles and prints a one-time warning.

Copy a component into your projectCopy Anchor Link

If you would rather own the source, copy it with the CLI. Run init once, then add.

npx hone-ui init
npx hone-ui add button

init writes hone-ui.json and a hone-ui.css file. add fails without them. The copies still need @hone-ui/react for the theme variables, so install it. Then import the package look first and the copied hone-ui.css after it, once at the root of your app.

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

import '@hone-ui/react/styles/material.css'; // or minimal.css
import './components/ui/hone-ui/hone-ui.css'; // the path init printed

The CLI page explains what init and add write. Every page below also works with the npm package.

Server and client componentsCopy Anchor Link

Box, Stack, Divider, Typography, Paper, AppBar, Toolbar, Skeleton, LinearProgress, CircularProgress, AlertTitle, the List parts except ListItemButton, AccordionDetails, AccordionActions, Card and its parts, DialogContent, DialogContentText, DialogActions and FormGroup run as React Server Components. They do not read the theme, so a components.X.defaultProps entry has no effect on them. The interactive components (Button, IconButton, Checkbox, Radio, RadioGroup, Switch, TextField, Select, MenuItem and the form parts) start with 'use client' and do read theme defaults.

Compatibility notesCopy Anchor Link

• Event handlers receive familiar arguments. onChange on Checkbox gets (event, checked). onClose on Dialog gets (event, reason).
• The component prop exists only on layout components.
• System props on the element (<Box p={2}>) are not supported. Write them in sx.
• Theme keys are plain component names such as Button.