React Native Mantine
Mantine for React Native: 122 themeable, accessible components for iOS, Android and Web with Mantine's theme system, variants and useForm API. Works with Expo and bare React Native.
GitHub · npm · llms.txt · Version 1.0.2
Installation
npm install react-native-mantineimport { Theme, Button } from 'react-native-mantine';
export default function App() {
return (
<Theme>
<Button variant="filled">Hello Mantine</Button>
</Theme>
);
}Components
Layout
Components for page structure and positioning
AppShell– Application layout with header, navbar, aside and footerAspectRatio– Maintain fixed aspect ratioBoxView– Flexible view container with styling propsCenter– Center content both horizontally and verticallyContainer– Responsive container with max-width constraintsFlex– Flexible box layout with full controlGrid– Flexible grid layoutGroup– Horizontal layout with spacing controlMediaQuery– Responsive visibility controlSimpleGrid– Auto-responsive grid layoutSpace– Add consistent spacing between elementsSplitter– Resizable panes divided by draggable handlesStack– Vertical layout with spacing control
Buttons
Button components and variations
ActionIcon– Compact icon button for actionsButton– Full-featured interactive buttonCloseButton– Universal close buttonCopyButton– Copy text to clipboardFileButton– Open the native document picker from any trigger elementUnstyledButton– Accessible button without default styles
Inputs
Form inputs and controls
AngleSlider– Pick an angle value between 0 and 360 degreesCheckbox– Checkbox with indeterminate stateChip– Selectable tag with checkmarkColorInput– Color value input with picker bottom sheetColorPicker– Pick a color with saturation, hue and alpha controlsCombobox– Building blocks for custom select componentsFieldset– Group form fields with legendFileInput– Pick files with the native document pickerInput– Versatile text input fieldInputBase– Standard input frame around arbitrary contentJsonInput– Textarea with JSON validation and formattingMaskInput– Format user input according to a mask patternMultiSelect– Multi-option select with tagsNativeSelect– Platform-native dropdown selectNumberInput– Numeric input with increment controlsPasswordInput– Secure password input with visibility togglePillsInput– Input container for pills with free text fieldPinInput– PIN or OTP input with auto-focusRadio– Radio button for exclusive selectionsRating– Interactive star ratingSegmentedControl– Segmented button group selectorSelect– Searchable select dropdownSwitch– Toggle switch with labelsTagsInput– Enter tags with suggestions supportTextInput– Single-line text input with validationTextarea– Multi-line text input with auto-resizeTransferList– Dual-list selection transferTreeSelect– Pick one or more values from a hierarchical data setuseForm– Form state management hook with validation
Navigation
Navigation components and links
Anchor– Styled link componentBreadcrumbs– Navigation breadcrumb trailNavLink– Navigation link with active statePagination– Page navigation with controlsStepper– Multi-step form navigationTableOfContents– List of links to page sections with depth offsets
Data display
Components for presenting data
Accordion– Expandable accordion panelsAvatar– User avatar with fallback supportBackgroundImage– Container with background imageBadge– Status badge with color variantsCard– Content card with sectionsColorSwatch– Color preview swatchDataList– Display a list of label-value pairsEmptyState– Tell the user that there is no content to displayImage– Responsive image with placeholderIndicator– Notification dot indicatorKbd– Keyboard shortcut displayOverflowList– Collapse items that do not fit into an overflow indicatorPill– Removable tag pillSpoiler– Content reveal with show more/lessThemeIcon– Icon with themed backgroundTimeline– Vertical timeline with itemsTree– Hierarchical list with expand, select and checkbox support
Overlays
Modals, popovers, and overlay components
Affix– Render content at a fixed position via portalDialog– Lightweight floating dialogDrawer– Side panel with slide animationFloatingWindow– Draggable window moved by its header barHoverCard– Dropdown with additional information on pressLoadingOverlay– Full-screen loading stateMenu– Dropdown menu with itemsMenubar– Horizontal bar of menus, one opened at a timeModal– Full-featured modal dialogOverlay– Customizable overlay backdropPopover– Rich content popoverTooltip– Contextual tooltip popup
Typography
Text formatting and display components
Blockquote– Styled quotation blockCode– Inline code with monospace stylingHighlight– Highlight specific text portionsList– Ordered and unordered listsMark– Marked/highlighted inline textNumberFormatter– Format numbers with separators and affixesRollingNumber– Display numbers with a rolling digit animationTable– Render data in rows and columnsText– Typography component with theme supportTitle– Semantic heading with size variantsTypography– Apply default typography styles to plain text content
Feedback
Loading states and user feedback
Loader– Animated loading indicatorNotification– Styled notification messageProgress– Progress bar with animationsRingProgress– Circular progress indicatorSemiCircleProgress– Represent a value as a semicircular gaugeSkeleton– Loading placeholder with pulse animation
Miscellaneous
Utility and helper components
Collapse– Smooth collapsible contentDivider– Visual separator with label supportFloatingIndicator– Animated indicator that slides between targetsIcon– FontAwesome icon componentMarquee– Continuously scrolling content loopPaper– Container with shadow and border radiusPortal– Render children into an overlay or a named hostScrollArea– Scrollable container with Mantine-compatible APIScroller– Horizontal scroller with edge gradients and controlsTransition– Animated mount/unmount transitionsVisuallyHidden– Hide content visually, keep it for screen readers
Theming
Theme system, colors, and styling utilities
Color Manipulation– Theme functions: lighten, darken, dimmedColor Palette– Complete color system aligned with Mantine webColor Scheme Constants– Color scheme-aware constants using colorSchemeValueComponent Variants– Guide to all 8 built-in component variantsCustom Fonts– Load and configure custom fonts with ThemeProviderGradients– Gradient support for buttons and backgroundsPrimary Color System– primaryColor and primaryShade configurationResponsive Utilities– Breakpoint utilities: largerThan and smallerThanShadow System– Shadow sizes aligned with Mantine web (xs, sm, md, lg, xl)Theme Customization– Customize colors, typography, and spacingTheme Override Example– Full example with colorSchemeValue and Button fix