# Docs - [Introduction](/docs): React components with a familiar API, React Aria's accessibility and plain CSS. - [Theming](/docs/theming): Pick a look, customize it with createTheme, and control dark mode. - [The sx prop](/docs/sx): Style any component with sx. Static values compile to CSS, and theme functions run in the browser. - [Copy components with the CLI](/docs/cli): Copy a component's source into your project with npx hone-ui add, and compare it with upstream. - [Visual editor](/docs/editor): Click a component in your running app, change its props and sx in a panel, and save the edit to the source file. - [MCP server](/docs/mcp): Let AI coding tools look up Hone UI guides, props and theme variables, and check their own JSX. - [ESLint plugin](/docs/eslint-plugin): Five ESLint rules that catch invalid prop values, missing accessible names, a broken renderInput and sx colors that ignore dark mode. - Components - [Components](/docs/components): Every component in the first release, with its props and notes on its behavior. - **Inputs** - [Button](/docs/components/button): Trigger an action, or follow a link that looks like a button. - [IconButton](/docs/components/icon-button): A button that holds a single icon. - [Checkbox](/docs/components/checkbox): A box that turns on and off. - [Radio and RadioGroup](/docs/components/radio-group): A set of radio buttons where one is chosen. - [Switch](/docs/components/switch): An on and off switch for a setting that applies at once. - [Select and MenuItem](/docs/components/select): Pick one value, or several, from a list of options. - [TextField](/docs/components/text-field): A single-line or multiline text input with a label and helper text. - [InputAdornment](/docs/components/input-adornment): Put an icon, a unit or a button before or after the text of an input. - [Slider](/docs/components/slider): Pick a value or a range by dragging along a rail. - [Autocomplete](/docs/components/autocomplete): A text field with a list of suggestions. - [FormControl and form parts](/docs/components/form-control): Share state between a label, an input and helper text. - [FormControlLabel and FormGroup](/docs/components/form-control-label): Pair a control with visible text, and stack related controls. - **Layout** - [Box](/docs/components/box): A generic container that accepts the sx prop. - [Stack](/docs/components/stack): Lay out children in one direction with a gap. - [Divider](/docs/components/divider): A thin line between pieces of content. - [CssBaseline](/docs/components/css-baseline): Set the page background, text color and font from the theme. - **Surfaces** - [App Bar](/docs/components/app-bar): The bar at the top of an app, with Toolbar for its content. - [Paper](/docs/components/paper): A surface with a shadow or a border. - [Card](/docs/components/card): A surface that groups related content and actions, with header, body, media and action parts. - [Accordion](/docs/components/accordion): Panels that open and close under a summary line. - [Backdrop](/docs/components/backdrop): A dimmed layer that covers the page. - [Dialog](/docs/components/dialog): A modal window for confirmations, short forms and decisions. - **Navigation** - [Tabs](/docs/components/tabs): A row of tabs for switching between views. - [Pagination](/docs/components/pagination): Page buttons for moving through paged content. - [Menu](/docs/components/menu): A list of actions in a popover. - [Drawer](/docs/components/drawer): A panel at the edge of the screen. - **Data display** - [Avatar](/docs/components/avatar): A picture, initials or an icon for a person, and groups of them. - [Badge](/docs/components/badge): A count or a dot on the corner of an element. - [Chip](/docs/components/chip): A compact element for a tag, a filter or a choice. - [List](/docs/components/list): Vertical lists of text, icons, avatars and actions. - [Table](/docs/components/table): Data tables with heads, rows, cells and paging. - [Typography](/docs/components/typography): Text in the theme's type scale. - [Tooltip](/docs/components/tooltip): A short label shown on hover or keyboard focus. - **Feedback** - [Alert](/docs/components/alert): A short message about something important. - [Progress](/docs/components/progress): Linear and circular progress indicators. - [Skeleton](/docs/components/skeleton): A placeholder shape shown while content loads. - [Snackbar](/docs/components/snackbar): A brief message at the edge of the screen. ## AI guides One guide per component, plus topic guides. Each lists props, correct and wrong usage, and accessibility rules. - [getting-started](/ai/getting-started.md): Set up a Vite app with `@hone-ui/react` in one pass: the build plugin, one look's CSS, the theme provider, the page baseline and the dev editor. - [Accordion](/ai/Accordion.md): A panel that opens and closes under its summary line. - [AccordionActions](/ai/AccordionActions.md): A part of Accordion. - [AccordionDetails](/ai/AccordionDetails.md): A part of Accordion. - [AccordionSummary](/ai/AccordionSummary.md): A part of Accordion. - [Alert](/ai/Alert.md): A short message about something important, with a severity icon and an optional close button. - [AlertTitle](/ai/AlertTitle.md): A bold first line inside an Alert. - [AppBar](/ai/AppBar.md): The bar at the top of an app that holds its title, navigation and actions. - [Autocomplete](/ai/Autocomplete.md): A text field with a list of suggestions. - [Avatar](/ai/Avatar.md): A picture, initials or an icon that stands for a person or an object. - [AvatarGroup](/ai/AvatarGroup.md): A row of overlapping avatars that ends in a `+N` avatar when there are too many. - [Backdrop](/ai/Backdrop.md): A dimmed layer that covers the page. - [Badge](/ai/Badge.md): A count or a dot on the corner of its child, such as unread messages on an icon. - [Box](/ai/Box.md): A generic container that takes `sx`. - [Button](/ai/Button.md): Use for actions. - [Card](/ai/Card.md): A surface that groups related content and actions. - [CardActions](/ai/CardActions.md): A flex row of actions at the bottom of a Card, with 8px padding and 8px between children. - [CardContent](/ai/CardContent.md): The padded body of a Card: 16px padding, 24px below when it is the last child. - [CardHeader](/ai/CardHeader.md): The top of a Card: an optional avatar, a title with a subheader, and an optional action. - [CardMedia](/ai/CardMedia.md): An image, video or other media area in a Card. - [Checkbox](/ai/Checkbox.md): A box that turns on and off. - [Chip](/ai/Chip.md): A compact element for a tag, a filter or a choice. - [CircularProgress](/ai/CircularProgress.md): A ring that shows progress, or spins while the amount is unknown. - [CssBaseline](/ai/CssBaseline.md): Sets the page baseline: body margin 0, theme background and text color, the body1 font, and `box-sizing: border-box` inherited down the tree. - [DevEditor](/ai/DevEditor.md): Use to edit `@hone-ui/react` components visually in a running dev server. - [Dialog](/ai/Dialog.md): A modal window over the page. - [DialogActions](/ai/DialogActions.md): The row of buttons at the bottom of a Dialog, aligned to the end. - [DialogContent](/ai/DialogContent.md): The body of a Dialog. - [DialogContentText](/ai/DialogContentText.md): Body text for a DialogContent, in the secondary text color. - [DialogTitle](/ai/DialogTitle.md): The heading of a Dialog. - [Divider](/ai/Divider.md): A thin line that separates content, with optional text in the middle. - [Drawer](/ai/Drawer.md): A panel at the edge of the screen, for navigation or a side sheet. - [eslint-plugin](/ai/eslint-plugin.md): Use to catch wrong Hone UI usage while you lint: invalid prop values, missing accessible names, system props that do nothing, fixed `sx` colors, a broken `renderInput` and `sx` colors that ignore dark mode. - [FormControl](/ai/FormControl.md): Use to share state between a label, a custom input and helper text. - [FormControlLabel](/ai/FormControlLabel.md): Pairs a Checkbox, Radio or Switch with visible text in one `label`. - [FormGroup](/ai/FormGroup.md): A wrapper that stacks form controls, such as several checkboxes. - [FormHelperText](/ai/FormHelperText.md): Use for the hint or error message under an input. - [FormLabel](/ai/FormLabel.md): Use for the label of a form control that is not a single text input, such as a radio group. - [IconButton](/ai/IconButton.md): A button that holds one icon. - [InitColorSchemeScript](/ai/InitColorSchemeScript.md): Renders one inline script that sets `data-color-scheme` on `` from the stored mode before the first paint, so a saved dark mode never flashes light. - [InputAdornment](/ai/InputAdornment.md): Use for an icon, unit or button inside the frame of a TextField or Select, before or after the text. - [InputLabel](/ai/InputLabel.md): Use for the floating label of an input inside a FormControl. - [LinearProgress](/ai/LinearProgress.md): A horizontal bar that shows progress, or loops while the amount is unknown. - [List](/ai/List.md): A vertical list of items. - [ListItem](/ai/ListItem.md): A part of List. - [ListItemAvatar](/ai/ListItemAvatar.md): A part of List. - [ListItemButton](/ai/ListItemButton.md): A part of List. - [ListItemIcon](/ai/ListItemIcon.md): A part of List. - [ListItemText](/ai/ListItemText.md): A part of List. - [ListSubheader](/ai/ListSubheader.md): A part of List. - [mcp](/ai/mcp.md): Use to look up Hone UI guides, props and theme variables, and to check a JSX snippet, through MCP tools. - [Menu](/ai/Menu.md): A list of actions in a popover next to an anchor element. - [MenuItem](/ai/MenuItem.md): One option of a Select. - [MenuList](/ai/MenuList.md): A menu that stays in the page, such as a list of actions in a sidebar. - [Pagination](/ai/Pagination.md): Page buttons with previous and next steps. - [PaginationItem](/ai/PaginationItem.md): One button of a Pagination. - [Paper](/ai/Paper.md): A surface with the paper background color and either a shadow or a border. - [Radio](/ai/Radio.md): One choice in a RadioGroup. - [RadioGroup](/ai/RadioGroup.md): A set of Radio buttons where one is chosen. - [Select](/ai/Select.md): Use to pick one value, or several with `multiple`, from a list of `MenuItem` options. - [Skeleton](/ai/Skeleton.md): A placeholder shape shown while content loads. - [Slider](/ai/Slider.md): Picks a number, or a range, by dragging a thumb along a rail. - [Snackbar](/ai/Snackbar.md): A brief message at the edge of the screen. - [SnackbarContent](/ai/SnackbarContent.md): The bar a Snackbar shows: a message and an optional action. - [Stack](/ai/Stack.md): Lays out children in one direction with a gap. - [Switch](/ai/Switch.md): An on/off switch for a setting that applies at once. - [system](/ai/system.md): The `sx` prop and the theme rules behind it. - [Tab](/ai/Tab.md): One tab of a Tabs row. - [Table](/ai/Table.md): A data table. - [TableBody](/ai/TableBody.md): A part of Table. - [TableCell](/ai/TableCell.md): A part of Table. - [TableContainer](/ai/TableContainer.md): A part of Table. - [TableFooter](/ai/TableFooter.md): A part of Table. - [TableHead](/ai/TableHead.md): A part of Table. - [TablePagination](/ai/TablePagination.md): A part of Table. - [TableRow](/ai/TableRow.md): A part of Table. - [Tabs](/ai/Tabs.md): A row of tabs for switching between views. - [TextField](/ai/TextField.md): Use for single-line and multiline text input with a label and helper text. - [theming](/ai/theming.md): Use `createTheme` and `ThemeProvider` to change colors, fonts, radius and spacing, and to control light and dark mode. - [Toolbar](/ai/Toolbar.md): A row that lines up a bar's title, buttons and icons. - [Tooltip](/ai/Tooltip.md): A short label next to an element, shown on hover or keyboard focus. - [Typography](/ai/Typography.md): Text in the theme's type scale.