
Mobile first accessible
components for
React Native & Web.
An accessible & utility-first component library to build your design system for all the platforms (web in alpha).
Now Available for both Mobile & Web
Powered by React Native Web. Build consistent UIs across Web, Android and iOS with ease.
Now Available for both Mobile & Web
Powered by React Native Web. Build consistent UIs across Web, Android and iOS with ease.
Out of the Box Accessibility
Powered by React Native ARIA.
React Native ARIA provides React hooks that enable you to build accessible design systems in no time.
Now Supporting Utility Props
Powered by Styled System so you can rapidly build custom UI components with constraint-based utility style props.
1<Box rounded="pill" w={80} shadow={4}>2<Image3roundedTop="pill"4h={56}5source={require("./assets/fish.jpeg")}6alt="NativeBase Card"7/>8<Stack p={4} space={3}>9<Heading color="blueGray.600">Clownfish</Heading>10<Text color="blueGray.500">11Bright orange with three distinctive white bars, clown anemonefish are12among the most recognizable at all reef-dwellers.13</Text>14<HStack space={4}>15<Button variant="ghost" colorScheme="blue" p={0} minH={0}>16SHARE17</Button>18<Button variant="ghost" colorScheme="blue" p={0} minH={0}>19LEARN MORE20</Button>21</HStack>22</Stack>23</Box>

Now Supporting Utility Props
Powered by Styled System so you can rapidly build custom UI components with constraint-based utility style props.

1<Box rounded="pill" w={80} shadow={4}>2<Image3roundedTop="pill"4h={56}5source={require("./assets/fish.jpeg")}6alt="NativeBase Card"7/>8<Stack p={4} space={3}>9<Heading color="blueGray.600">Clownfish</Heading>10<Text color="blueGray.500">11Bright orange with three distinctive white bars, clown anemonefish are12among the most recognizable at all reef-dwellers.13</Text>14<HStack space={4}>15<Button variant="ghost" colorScheme="blue" p={0} minH={0}>16SHARE17</Button>18<Button variant="ghost" colorScheme="blue" p={0} minH={0}>19LEARN MORE20</Button>21</HStack>22</Stack>23</Box>
Highly themeable, the only limit is your imagination
Themeability is one of the core elements of NativeBase. Customise your app theme and component styles to your heart's content.
1<Box rounded="pill" w={64} shadow={4}>2<Image3h={64}4rounded="pill"5source={require("./assets/forest.jpeg")}6alt="NativeBase Card"7/>8<Center position="absolute" height="100%" width="100%">9<Icon10type="AntDesign"11name="play"12color="gray.200"13size={12}14opacity={0.8}15/>16</Center>17<HStack18position="absolute"19bottom={4}20w={64}21px={4}22alignItems="center"23justifyContent="space-between"24>25<Stack>26<Heading color="gray.200" size="md">27Sacred Grove28</Heading>29<Text color="gray.200">Meghalaya</Text>30</Stack>31<Icon name="more-horizontal" type="Feather" color="white" />32</HStack>33</Box>

Highly themeable, the only limit is your imagination
Themeability is one of the core elements of NativeBase. Customise your app theme and component styles to your heart's content.
1<Box rounded="pill" w={64} shadow={4}>2<Image3h={64}4rounded="pill"5source={require("./assets/forest.jpeg")}6alt="NativeBase Card"7/>8<Center position="absolute" height="100%" width="100%">9<Icon10type="AntDesign"11name="play"12color="gray.200"13size={12}14opacity={0.8}15/>16</Center>17<HStack18position="absolute"19bottom={4}20w={64}21px={4}22alignItems="center"23justifyContent="space-between"24>25<Stack>26<Heading color="gray.200" size="md">27Sacred Grove28</Heading>29<Text color="gray.200">Meghalaya</Text>30</Stack>31<Icon name="more-horizontal" type="Feather" color="white" />32</HStack>33</Box>

Responsiveness made easy
Instead of manually adding responsiveness, NativeBase V3 allows you to provide object and array values to add responsive styles.
1<Box2flexDirection={{ base: 'column', md: 'row' }}3shadow={4}4rounded="xl"5overflow="hidden"6>7<Box width={{ md: 24 }} height={{ base: 32, md: '100%' }}>8<Image9source={{10uri:11'https://static.nike.com/a/images/f_auto/dpr_2.0/w_1328,c_limit/b56d1e9b-3861-4c89-995d-b8fb6240a762/nike-just-do-it.jpg'12}}13alt="Shoes"14/>15</Box>16<Stack p={3} space={2} minW={32}>17<Text fontSize="xs" color="red.400" fontWeight="semibold">18Just In19</Text>20<Stack space={1}>21<Heading size="sm">Jordan MA2</Heading>22<Text fontWeight="medium" color="blueGray.600">23Older Kids' Shoe24</Text>25<Text fontWeight="medium" color="blueGray.600">262 colors27</Text>28</Stack>29<Text fontSize="md" fontWeight="semibold" color="blueGray.600">30$ 15031</Text>32</Stack>33</Box>

Responsiveness made easy
Instead of manually adding responsiveness, NativeBase V3 allows you to provide object and array values to add responsive styles.

1<Box2flexDirection={{ base: 'column', md: 'row' }}3shadow={4}4rounded="xl"5overflow="hidden"6>7<Box width={{ md: 24 }} height={{ base: 32, md: '100%' }}>8<Image9source={{10uri:11'https://static.nike.com/a/images/f_auto/dpr_2.0/w_1328,c_limit/b56d1e9b-3861-4c89-995d-b8fb6240a762/nike-just-do-it.jpg'12}}13alt="Shoes"14/>15</Box>16<Stack p={3} space={2} minW={32}>17<Text fontSize="xs" color="red.400" fontWeight="semibold">18Just In19</Text>20<Stack space={1}>21<Heading size="sm">Jordan MA2</Heading>22<Text fontWeight="medium" color="blueGray.600">23Older Kids' Shoe24</Text>25<Text fontWeight="medium" color="blueGray.600">262 colors27</Text>28</Stack>29<Text fontSize="md" fontWeight="semibold" color="blueGray.600">30$ 15031</Text>32</Stack>33</Box>
We are growing
38.2k
Downloads per week
14.8k
Github stars
196
Contributors
53.6k
Dependents
Watch our Talk
Join Sankhadeep Roy & Sanket Sahu from GeekyAnts as they discuss previous versions of NativeBase & the roadmap for NativeBase 3.0, all while building it live.
Watch our Talk
Join Sankhadeep Roy & Sanket Sahu from GeekyAnts as they discuss previous versions of NativeBase & the roadmap for NativeBase 3.0, all while building it live.
Join our Community
We have a lively community built on our shared love for React & React Native. Check out our recent blog posts and come join us!
Chat with us on Discord
Chat with us on Discord
More from the Authors
Interested in other projects we've worked on? We're delighted! Learn more here:
We use our own and third-party cookies and other tracking technologies, by continuing to browse the website, you accept our use of cookies and tracking technologies.