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)

Get Started

15K+Stars

MOBILE

TABLET

DESKTOP


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

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

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

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.


<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!

What are people saying?

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

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.

Varun Raja@thevarunraja

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

Adam Dill@adamdill

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

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.

Alex Loukissas@aloukissas

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

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.

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