Introduction

Jone - Base UI & React Aria UI library Copy-paste components for your React apps

Welcome to Jone! A UI library built on Base UI and React Aria headless primitives.

Getting Started

Component	Description
`Accordion`	A vertically stacked set of interactive headings that each reveal a section of content.
`Autocomplete`	A text input that offers suggestions as the user types.
`Avatar`	A visual representation of a user or entity.
`Button`	An interactive element used to trigger an action.
`Checkbox`	A control that allows the user to toggle between two states.
`Collapsible`	An element that can be toggled to show or hide its content.
`Combobox`	A hybrid between a text input and a select menu.
`Dialog`	A modal window that appears on top of the main content.
`Drawer`	A panel that slides in from the edge of the screen.
`Field`	A wrapper for form controls providing labels and error messages.
`Input`	A standard form input field.
`Menu`	A list of options that appears when triggered.
`NumberField`	An input specifically for numeric values.
`Popover`	A non-modal overlay that displays content near a trigger.
`Progress`	An indicator showing the status of a long-running task.
`RadioGroup`	A set of options where only one can be selected.
`Select`	A dropdown menu for picking a single option.
`Slider`	A control for selecting a value from a range.
`Switch`	A toggle for switching between on and off states.
`Tabs`	A way to organize content into multiple views.
`Toast`	A brief notification that appears and disappears automatically.
`Tooltip`	A small pop-up that appears when hovering over an element.

Component	Description
`AlertDialog`	A specialized dialog for critical information or confirmations.
`Breadcrumbs`	A navigation aid showing the user's location in a hierarchy.
`Calendar`	A component for picking dates from a calendar view.
`ColorPicker`	A suite of components for selecting colors (Area, Slider, Swatch, Wheel).
`ComboBox`	A searchable dropdown menu.
`CommandPalette`	A powerful search and action interface.
`DateField`	An input for specific date components (year, month, day).
`DatePicker`	A combination of DateField and Calendar for picking dates.
`Disclosure`	A simple toggle for showing and hiding content.
`Form`	A wrapper for managing form state and validation.
`GridList`	An interactive list of items with multiple selection support.
`Link`	An interactive element for navigating between pages.
`ListBox`	A list of selectable items.
`Meter`	A display for a measurement within a known range.
`Modal`	A container for displaying content in an overlay.
`ProgressBar`	A visual indicator of progress.
`SearchField`	A specialized input for search queries.
`Table`	A complex component for displaying tabular data.
`TagGroup`	A component for managing a collection of tags or labels.
`TextField`	A standard text input with support for labels and errors.
`ToggleButton`	A button that can be toggled between active and inactive states.
`Tree`	A component for displaying hierarchical data.