Mobile-first, accessible
components for
React Native & Web

NativeBase is an accessible, utility-first library that helps you build a consistent design system across Android, iOS and Web (alpha)
<Box
shadow={2}
rounded="lg"
w={{ base: 56, md: 80, lg: "md" }}
>
<AspectRatio w="100%" ratio={ratio}>
<Image source={HeroImg} alt="image base" />
</AspectRatio>
<Text bold position="absolute" color="white" top={0} m={[4, 4, 8]}>
NEWS
</Text>
<Stack space={4} p={[4, 4, 8]}>
<Text color="gray.400">June 15, 2021</Text>
<Heading size={["md", "lg", "md"]}>
The Stunning Dawki River in Meghalaya is So Clear That Boats Appear
Floating in Air
</Heading>
<Text lineHeight={[5, 5, 7]} noOfLines={[4, 4, 2]}>
With lush green meadows, rivers clear as crystal, pine-covered
hills, gorgeous waterfalls, lakes and majestic forests, the
mesmerizing. Meghalaya is truly a Nature lover’s paradise…
</Text>
</Stack>
<HStack space={3} px={[4, 4, 8]} pb={[4, 4, 8]}>
<MoreIcon color={useColorModeValue("green.600", "green.400")} />
<Text color={useColorModeValue("green.800", "green.400")}>
Find out more
</Text>
</HStack>
</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.

Know More

Rose
Rose 50
#fff1f2
Rose 100
#ffe4e6
Rose 200
#fecdd3
Rose 300
#fda4af
Rose 400
#fb7185
Rose 500
#f43f5e
Rose 600
#ee1d48
Rose 700
#be123c
Rose 800
#9f1239
Rose 900
#881337
Pink
Pink 50
#fdf2f8
Pink 100
#fce7f3
Pink 200
#fbcfe8
Pink 300
#f9a8d4
Pink 400
#f472b6
Pink 500
#ec4899
const colors = {
rose: {
50: '#fff1f2',
100: '#ffe4e6',
200: '#fecdd3',
300: '#fda4af',
400: '#fb7185',
500: '#f43f5e',
600: '#e11d48',
700: '#be123c',
800: '#9f1239',
900: '#881337',
},
pink: {
50: '#fdf2f8',
100: '#fce7f3',
200: '#fbcfe8',
300: '#f9a8d4',
400: '#f472b6',
500: '#ec4899',
600: '#db2777',
700: '#be185d',
800: '#9d174d',
900: '#831843',
},
};

Out of the Box Accessibility

Powered by React Native ARIA

Powered by React Native ARIA, which provides React hooks that enable you to build accessible design systems in no time.

Know More

Keyboard Interactions
NativeBase primitives provide basic keyboard support for your apps so that users can navigate it without a mouse.
Screen Readers
Screen readers facilitate text-to-speech conversion and detect crucial content to be conveyed to people with visual disabilities.
Contrast Ratio
NativeBase gives you a contrasting colour based on your theme. You can also customise it using the useAccessibleColors hook.

Now Supporting Utility Props

Powered byStyled System

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

Know More

Hey There!
<Box
p={4}
mb={[4,5]}
bg='primary.400'
rounded="lg"
>
<Text bold color="white">
Hey There!
</Text>
</Box>

Rich Component Library

NativeBase offers over 60 components so you can build seamlessly. It includes action sheets, menus, spinners, popovers, breadcrumbs and more.

Know More

<Box alignItems="flex-end" p={8}>
<VStack alignItems="flex-end" space={5}>
<FormControl>
<FormControl.Label mb={3}>What's your event called?</FormControl.Label>
<Input placeholder="Event's Name" />
</FormControl>
<FormControl>
<FormControl.Label mb={3}>When is your Event?</FormControl.Label>
<Radio.Group nativeID="patani" name="day_night">
<VStack space={3}>
<Radio value="day">Day</Radio>
<Radio value="night">Night</Radio>
</VStack>
</Radio.Group>
</FormControl>
<Divider />
<Checkbox size="sm" value="tnc" justifyContent="center" mb={4}>
I agree to Terms and conditions
</Checkbox>
</VStack>
<Button mt={2} endIcon={<AddIcon size={3} />}>Create Event</Button>
</Box>

Responsiveness

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

Know More

<Center flex={1} p={4}>
<Stack
m={4}
w="100%"
h="100%"
direction={{ base: "column", md: "row" }}
rounded="xl"
>
<VStack
space={{ base: 2, md: 4 }}
flex={{ base: "none", md: 1 }}
p={4}
bg="blueGray.500"
>
{}
<VStack display={{ base: "none", md: "flex" }} space={6} mt={8}>
{sidebarItems.map((sidebarItem) => {
return (
{sidebarItem}
);
})}
</VStack>
</VStack>
<Box flex={{ base: 1, md: 3 }} bg="blueGray.50">
<VStack px={8} my={6} space={6}>
<DashboardTitle/>
<HStack mt={4} space={4}>
<UserProfile/>
<VStack flex={1}>
<DashboardTable/>
</VStack>
</HStack>
</VStack>
</Box>
</Stack>
</Center>

Now With Dark Mode

Building apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.

Know More

<Stack space={4}>
<FormControl>
<Input placeholder="Chat Room ID" />
</FormControl>
<Button
colorScheme="green"
endIcon={<ArrowForwardIcon size={6} />}
>
Join In
</Button>
</Stack>

Consistent across Web, Android & iOS

Whether you're building for the web, Android or iOS, we've got you covered. Fast-track your dev process with universal components.

Know More

We Are Growing

NativeBase is a popular component library among devs and we're constantly improving it.

32K+

Downloads

15k+

GithubStars

200+

Contributors

50K+

Dependents

Our Community

We have a lively community built on our shared love for React & React Native. Join us!

Discord
Github
Stackoverflow
Twitter
Facebook

What are people saying?

Here's what other React devs have to say about NativeBase.

Twitter Profile Image of Reviewer
Adarsh Jaiswal@jaisadarsh123

The level of customisable theme being provided by @NativeBaseIO alpha is really great to see. ⭐Eagerly waiting for the fully stable version.

Twitter Profile Image of Reviewer
Varun Raja@thevarunraja

Recently started development in React Native. Tried @NativeBaseIO Component library. The library is awesome. It makes development easier and faster.

Twitter Profile Image of Reviewer
Adam Dill@adamdill

Really enjoying how good the @nativebaseio docs are. It's a really solid UI project for React Native. 

Twitter Profile Image of Reviewer
Shad Mirza@iamshadmirza

Was going through @NativeBaseIO library today and played with some components provided by it. Brilliant work @geekyants. Loved it. This can make development so much faster.

Twitter Profile Image of Reviewer
Alex Loukissas@aloukissas

It's fantastic what you hack in a couple of days with tools like @reactnative, @expo_io and @NativeBaseIO

Twitter Profile Image of Reviewer
alex_a@FullStackAlex

Great framework of components on #ReactNative at https://nativebase.io #NativeBase. Check out the demo app and be blown away!

Join Our Newsletter

Get regular updates on NativeBase, our community and more!

Talks and Articles

Check out Sanket Sahu's talk on building an accessible component library for native and web at React Day Bangalore.

nb-talk-banner

Invite us to speak at your next event

We love sharing knowledge and meeting other passionate devs. Invite a NativeBase creator to speak at your next event, we promise to keep things interesting!

Send Invite

Meet the Creators

NativeBase 3.0 has come to fruition only due to the amazing team that worked tirelessly on it. Kudos to our creators!

theankurkedia
MD-REHMAN
rayan1810
intergalacticspacehighway
vidhi499
himanshu-satija
makkarMeenu
Ajamuar
sanketsahu
gauravguha
cyrus25
amars29
madhav23bansal

Our Sponsors

We are very grateful to those who believe in what we do. Here's to all our wonderful sponsors!

Become a sponsor

More from the Authors

Curious about what else we've worked on? We are delighted! Take a look at a few of our other projects.

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.