# 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.

react-native-mantine (npm) is a React Native port of the Mantine UI library. Version 1.0.2. MIT license. Author: auronsan. Repository: https://github.com/auronsan/react-native-mantine. npm: https://www.npmjs.com/package/react-native-mantine.

Install with `npm install react-native-mantine`, wrap the app in `<Theme>` (or `<ThemeProvider>`), then import components such as `Button`, `TextInput`, `Select`, `Modal`, `Stepper`, `Tree`, `TransferList` from `react-native-mantine`. Icons, gradients, clipboard, document picking and fonts are optional adapters passed via `<Theme adapters={...}>` or `configureMantine()`. The theme (colors, spacing, radius, shadows, variants, `useForm`) follows Mantine so web and mobile apps can share tokens.

## Docs

- [Full documentation for LLMs](https://auronsan.github.io/react-native-mantine/llms-full.txt): every component with description, usage snippet and props
- [README](https://github.com/auronsan/react-native-mantine#readme): installation, theming, adapters, hooks
- [Changelog](https://github.com/auronsan/react-native-mantine/blob/main/CHANGELOG.md)

## Components

- Layout: [AppShell](https://auronsan.github.io/react-native-mantine/components/app-shell/), [AspectRatio](https://auronsan.github.io/react-native-mantine/components/aspect-ratio/), [BoxView](https://auronsan.github.io/react-native-mantine/components/box-view/), [Center](https://auronsan.github.io/react-native-mantine/components/center/), [Container](https://auronsan.github.io/react-native-mantine/components/container/), [Flex](https://auronsan.github.io/react-native-mantine/components/flex/), [Grid](https://auronsan.github.io/react-native-mantine/components/grid/), [Group](https://auronsan.github.io/react-native-mantine/components/group/), [MediaQuery](https://auronsan.github.io/react-native-mantine/components/media-query/), [SimpleGrid](https://auronsan.github.io/react-native-mantine/components/simple-grid/), [Space](https://auronsan.github.io/react-native-mantine/components/space/), [Splitter](https://auronsan.github.io/react-native-mantine/components/splitter/), [Stack](https://auronsan.github.io/react-native-mantine/components/stack/)
- Buttons: [ActionIcon](https://auronsan.github.io/react-native-mantine/components/action-icon/), [Button](https://auronsan.github.io/react-native-mantine/components/button/), [CloseButton](https://auronsan.github.io/react-native-mantine/components/close-button/), [CopyButton](https://auronsan.github.io/react-native-mantine/components/copy-button/), [FileButton](https://auronsan.github.io/react-native-mantine/components/file-button/), [UnstyledButton](https://auronsan.github.io/react-native-mantine/components/unstyled-button/)
- Inputs: [AngleSlider](https://auronsan.github.io/react-native-mantine/components/angle-slider/), [Checkbox](https://auronsan.github.io/react-native-mantine/components/checkbox/), [Chip](https://auronsan.github.io/react-native-mantine/components/chip/), [ColorInput](https://auronsan.github.io/react-native-mantine/components/color-input/), [ColorPicker](https://auronsan.github.io/react-native-mantine/components/color-picker/), [Combobox](https://auronsan.github.io/react-native-mantine/components/combobox/), [Fieldset](https://auronsan.github.io/react-native-mantine/components/fieldset/), [FileInput](https://auronsan.github.io/react-native-mantine/components/file-input/), [Input](https://auronsan.github.io/react-native-mantine/components/input/), [InputBase](https://auronsan.github.io/react-native-mantine/components/input-base/), [JsonInput](https://auronsan.github.io/react-native-mantine/components/json-input/), [MaskInput](https://auronsan.github.io/react-native-mantine/components/mask-input/), [MultiSelect](https://auronsan.github.io/react-native-mantine/components/multi-select/), [NativeSelect](https://auronsan.github.io/react-native-mantine/components/native-select/), [NumberInput](https://auronsan.github.io/react-native-mantine/components/number-input/), [PasswordInput](https://auronsan.github.io/react-native-mantine/components/password-input/), [PillsInput](https://auronsan.github.io/react-native-mantine/components/pills-input/), [PinInput](https://auronsan.github.io/react-native-mantine/components/pin-input/), [Radio](https://auronsan.github.io/react-native-mantine/components/radio/), [Rating](https://auronsan.github.io/react-native-mantine/components/rating/), [SegmentedControl](https://auronsan.github.io/react-native-mantine/components/segmented-control/), [Select](https://auronsan.github.io/react-native-mantine/components/select/), [Switch](https://auronsan.github.io/react-native-mantine/components/switch/), [TagsInput](https://auronsan.github.io/react-native-mantine/components/tags-input/), [TextInput](https://auronsan.github.io/react-native-mantine/components/text-input/), [Textarea](https://auronsan.github.io/react-native-mantine/components/textarea/), [TransferList](https://auronsan.github.io/react-native-mantine/components/transfer-list/), [TreeSelect](https://auronsan.github.io/react-native-mantine/components/tree-select/), [useForm](https://auronsan.github.io/react-native-mantine/components/use-form/)
- Navigation: [Anchor](https://auronsan.github.io/react-native-mantine/components/anchor/), [Breadcrumbs](https://auronsan.github.io/react-native-mantine/components/breadcrumbs/), [NavLink](https://auronsan.github.io/react-native-mantine/components/nav-link/), [Pagination](https://auronsan.github.io/react-native-mantine/components/pagination/), [Stepper](https://auronsan.github.io/react-native-mantine/components/stepper/), [TableOfContents](https://auronsan.github.io/react-native-mantine/components/table-of-contents/)
- Data display: [Accordion](https://auronsan.github.io/react-native-mantine/components/accordion/), [Avatar](https://auronsan.github.io/react-native-mantine/components/avatar/), [BackgroundImage](https://auronsan.github.io/react-native-mantine/components/background-image/), [Badge](https://auronsan.github.io/react-native-mantine/components/badge/), [Card](https://auronsan.github.io/react-native-mantine/components/card/), [ColorSwatch](https://auronsan.github.io/react-native-mantine/components/color-swatch/), [DataList](https://auronsan.github.io/react-native-mantine/components/data-list/), [EmptyState](https://auronsan.github.io/react-native-mantine/components/empty-state/), [Image](https://auronsan.github.io/react-native-mantine/components/image/), [Indicator](https://auronsan.github.io/react-native-mantine/components/indicator/), [Kbd](https://auronsan.github.io/react-native-mantine/components/kbd/), [OverflowList](https://auronsan.github.io/react-native-mantine/components/overflow-list/), [Pill](https://auronsan.github.io/react-native-mantine/components/pill/), [Spoiler](https://auronsan.github.io/react-native-mantine/components/spoiler/), [ThemeIcon](https://auronsan.github.io/react-native-mantine/components/theme-icon/), [Timeline](https://auronsan.github.io/react-native-mantine/components/timeline/), [Tree](https://auronsan.github.io/react-native-mantine/components/tree/)
- Overlays: [Affix](https://auronsan.github.io/react-native-mantine/components/affix/), [Dialog](https://auronsan.github.io/react-native-mantine/components/dialog/), [Drawer](https://auronsan.github.io/react-native-mantine/components/drawer/), [FloatingWindow](https://auronsan.github.io/react-native-mantine/components/floating-window/), [HoverCard](https://auronsan.github.io/react-native-mantine/components/hover-card/), [LoadingOverlay](https://auronsan.github.io/react-native-mantine/components/loading-overlay/), [Menu](https://auronsan.github.io/react-native-mantine/components/menu/), [Menubar](https://auronsan.github.io/react-native-mantine/components/menubar/), [Modal](https://auronsan.github.io/react-native-mantine/components/modal/), [Overlay](https://auronsan.github.io/react-native-mantine/components/overlay/), [Popover](https://auronsan.github.io/react-native-mantine/components/popover/), [Tooltip](https://auronsan.github.io/react-native-mantine/components/tooltip/)
- Typography: [Blockquote](https://auronsan.github.io/react-native-mantine/components/blockquote/), [Code](https://auronsan.github.io/react-native-mantine/components/code/), [Highlight](https://auronsan.github.io/react-native-mantine/components/highlight/), [List](https://auronsan.github.io/react-native-mantine/components/list/), [Mark](https://auronsan.github.io/react-native-mantine/components/mark/), [NumberFormatter](https://auronsan.github.io/react-native-mantine/components/number-formatter/), [RollingNumber](https://auronsan.github.io/react-native-mantine/components/rolling-number/), [Table](https://auronsan.github.io/react-native-mantine/components/table/), [Text](https://auronsan.github.io/react-native-mantine/components/text/), [Title](https://auronsan.github.io/react-native-mantine/components/title/), [Typography](https://auronsan.github.io/react-native-mantine/components/typography/)
- Feedback: [Loader](https://auronsan.github.io/react-native-mantine/components/loader/), [Notification](https://auronsan.github.io/react-native-mantine/components/notification/), [Progress](https://auronsan.github.io/react-native-mantine/components/progress/), [RingProgress](https://auronsan.github.io/react-native-mantine/components/ring-progress/), [SemiCircleProgress](https://auronsan.github.io/react-native-mantine/components/semi-circle-progress/), [Skeleton](https://auronsan.github.io/react-native-mantine/components/skeleton/)
- Miscellaneous: [Collapse](https://auronsan.github.io/react-native-mantine/components/collapse/), [Divider](https://auronsan.github.io/react-native-mantine/components/divider/), [FloatingIndicator](https://auronsan.github.io/react-native-mantine/components/floating-indicator/), [Icon](https://auronsan.github.io/react-native-mantine/components/icon/), [Marquee](https://auronsan.github.io/react-native-mantine/components/marquee/), [Paper](https://auronsan.github.io/react-native-mantine/components/paper/), [Portal](https://auronsan.github.io/react-native-mantine/components/portal/), [ScrollArea](https://auronsan.github.io/react-native-mantine/components/scroll-area/), [Scroller](https://auronsan.github.io/react-native-mantine/components/scroller/), [Transition](https://auronsan.github.io/react-native-mantine/components/transition/), [VisuallyHidden](https://auronsan.github.io/react-native-mantine/components/visually-hidden/)
- Theming: [Color Manipulation](https://auronsan.github.io/react-native-mantine/components/color-manipulation/), [Color Palette](https://auronsan.github.io/react-native-mantine/components/color-palette/), [Color Scheme Constants](https://auronsan.github.io/react-native-mantine/components/color-scheme-constants/), [Component Variants](https://auronsan.github.io/react-native-mantine/components/component-variants/), [Custom Fonts](https://auronsan.github.io/react-native-mantine/components/custom-fonts/), [Gradients](https://auronsan.github.io/react-native-mantine/components/gradients/), [Primary Color System](https://auronsan.github.io/react-native-mantine/components/primary-color-system/), [Responsive Utilities](https://auronsan.github.io/react-native-mantine/components/responsive-utilities/), [Shadow System](https://auronsan.github.io/react-native-mantine/components/shadow-system/), [Theme Customization](https://auronsan.github.io/react-native-mantine/components/theme-customization/), [Theme Override Example](https://auronsan.github.io/react-native-mantine/components/theme-override-example/)

## Optional

- [Interactive showcase](https://auronsan.github.io/react-native-mantine/): the same pages rendered by the React Native Web app