Components
75The whole @xaui/native catalogue: live React Native Web preview, anatomy, examples, generated TypeScript API, accessibility and migration.
Feedback
Alert
A message the interface has to make sure is read — an outcome, a warning, a failure.
@xaui/native/alertEmptyState
What is on the screen when there is nothing on the screen.
@xaui/native/empty-stateProgressBar
How far along something is.
@xaui/native/progress-barProgressCircle
How far along something is, drawn as a ring.
@xaui/native/progress-circleSkeleton
The shape of what has not arrived yet.
@xaui/native/skeletonSnackbar
A temporary, controlled message inspired by the legacy Snackbar rather than by the v1 Toast queue. Several messages share a vertical anchor through Snackbar.Stack, so they never overlap.
@xaui/native/snackbarSpinner
The wait, drawn. A circle whose arc turns until whatever is loading has loaded.
@xaui/native/spinnerToast
A notice that arrives because something happened, and leaves on its own.
@xaui/native/toastCharts
AreaChart
The LineChart with the ground under it filled.
@xaui/native/area-chartBarChart
A bar per row, and a bar per series inside it once there is more than one.
@xaui/native/bar-chartCharts
Five figures — LineChart, AreaChart, BarChart, PieChart, RadarChart — and the plot the first three share.
@xaui/native/chartLineChart
A line per series, over a shared scale.
@xaui/native/line-chartPieChart
The whole, and its parts.
@xaui/native/pie-chartRadarChart
Several quantities at once, each on its own axis.
@xaui/native/radar-chartRadialChart
Several quantities, each as far round its own ring as it has got.
@xaui/native/radial-chartForms
Autocomplete
A field that opens a list you search.
@xaui/native/autocompleteCheckbox
A box that is either ticked or not, with the label that says what it means.
@xaui/native/checkboxColorPicker
A colour, chosen off a palette. Imports from @xaui/native/color-picker. Run the color-picker demo screen to try the real component in light and dark mode.
@xaui/native/color-pickerCombobox
A field you type in, over a list you must choose from.
@xaui/native/comboboxDatePicker
A field that opens a month.
@xaui/native/date-pickerDateRangePicker
A field that opens a month, and takes two days from it.
@xaui/native/date-range-pickerDateTimePicker
A field that opens a month, and then a clock.
@xaui/native/date-time-pickerDummyField
A field container styled identically to a text input (TextField), but non-editable and pressable. Designed as a trigger for pickers, modals, bottom sheets, menus, or file selection — or for presenting a read-only field value that can be tapped.
@xaui/native/dummy-fieldFieldGroup
A field with something beside it — a glyph, a unit, a reveal toggle.
@xaui/native/field-groupInputOTP
A one-time code, one character to a box.
@xaui/native/input-otpMaskField
A value typed into a shape — a date, a time, a card number, or a pattern of your own.
@xaui/native/mask-fieldNumberField
A number, typed — with the two ends of its range and a pair of buttons that walk it.
@xaui/native/number-fieldNumberPad
The keypad a PIN, a code and an amount are typed on.
@xaui/native/number-padNumberStepper
A quantity, and the two presses that move it.
@xaui/native/number-stepperPhoneNumberField
A national phone number beside its country flag and calling code, with a searchable country sheet. Imports from @xaui/native/phone-number-field. Run the phone-number-field demo screen to try the real component in light and dark mode.
@xaui/native/phone-number-fieldRadio
One option out of a set, and the label that says which.
@xaui/native/radioRangeCalendar
A month, and the period chosen in it.
@xaui/native/range-calendarRating
A row of marks, given or shown.
@xaui/native/ratingSearchField
A query, with the mark that says so and the cross that takes it back. Imports from @xaui/native/search-field. Run the search-field demo screen to try the real component in light and dark mode.
@xaui/native/search-fieldSelect
A field that opens a list. It is the TextField's twin: the same field tokens, the same four levels, the same heights — so the two sit in a form and read as one control.
@xaui/native/selectSlider
A value chosen along a line.
@xaui/native/sliderSwitch
A setting that is on or off, and takes effect the moment it is flipped.
@xaui/native/switchTextArea
A multiline field, with the label, the hint and the error that make it usable.
@xaui/native/text-areaTextField
A text field, with the label, the hint and the error that make it usable.
@xaui/native/text-fieldTimePicker
A field that opens a clock.
@xaui/native/time-pickerWheelPicker
A column of options you turn, and the one at the middle is the answer.
@xaui/native/wheel-pickerData display
Avatar
A person or a thing, in a circle.
@xaui/native/avatarBadge
A count, or the fact that there is one.
@xaui/native/badgeCarousel
A series of slides, one or a few at a time, with the controls to move between them.
@xaui/native/carouselChip
A compact token — a status, a tag, a filter, a person.
@xaui/native/chipList
List virtualise une collection avec le FlatList de React Native. Il fournit la structure visuelle d'une ligne sans lui attribuer de comportement de sélection ou de pression.
@xaui/native/listListBox
Rows on a ground.
@xaui/native/list-boxTable
Rows and columns, with a shell round them.
@xaui/native/tableTagGroup
A wrapping set of tags you can turn on, and take off.
@xaui/native/tag-groupTimeline
What happened, in order, with a line through it.
@xaui/native/timelineTypography
Text, by the role it plays. Ten roles fix size, line height, weight and family together, so a heading cannot be set in a body weight and a caption cannot be set in a display size.
@xaui/native/typographyWidget
A thing on a dashboard: a title, a card, and a line about it underneath.
@xaui/native/widgetOverlays
BottomSheet
A surface that comes up from the bottom edge and can be thrown back down.
@xaui/native/bottom-sheetDialog
A question the page has to be answered before it goes on.
@xaui/native/dialogMenu
A list of actions, anchored to whatever opened it. The Popover's positioning with rows in it.
@xaui/native/menuPopover
A panel anchored to whatever opened it. The component the Select was written before: the two share their positioning, their measuring pass and their entrance.
@xaui/native/popoverActions
Button
A control that runs an action when it is pressed. The reference component: every other one in the library is this shape.
@xaui/native/buttonCloseButton
The way out, on its own.
@xaui/native/close-buttonFab
The one thing to do on a screen, floating over the thing it does it to.
@xaui/native/fabMorphButton
A button that changes shape: a pill at rest, a card once it is open.
@xaui/native/morph-buttonSlideButton
A button you drag rather than tap — slide the thumb to the end and it fires once. It is the confirmation for an action that must not happen by accident.
@xaui/native/slide-buttonToggleButton
A button that keeps whether it is active. It is for independent choices such as Like, Favourite, Pin or Mute — one press turns the choice on, the next turns it off.
@xaui/native/toggle-buttonLayout
Card
A surface that groups related content — and, with isPressable, the control that opens it.
@xaui/native/cardDivider
The line between two things.
@xaui/native/dividerFlipCard
A card with two faces, and a turn between them.
@xaui/native/flip-cardScaffold
The app's chrome, painted from the theme: the ground under every screen, the status bar over it, and the options the navigator is dressed with.
@xaui/native/scaffoldSurface
A ground for other things to sit on.
@xaui/native/surfaceLayout — Row, Column, Stack, Grid
Four components. Row and Column are the two axes and contribute one declaration each; Stack overlays; Grid lays out fixed columns. Everything else you write on them is R14 — React Native's own style keys, exposed as props on every node.
@xaui/native/view