NativeBase is now gluestack

The first React Native component library — first published in April 2016.

NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS and Web.

9:41

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
theme.ts
const colors = {
  rose: { 50: "#fff1f2", 500: "#f43f5e", 900: "#881337" },
  pink: { 50: "#fdf2f8", 500: "#ec4899", 900: "#831843" },
};

export const theme = extendTheme({ colors });

Inspired by Styled System

Now supporting utility props

Style your components inline with constraint-based utility props that map directly to your theme tokens.

Know More
Hello.tsx
<Box px="3" py="2" mb={["4", "5"]} bg="primary.400" rounded="lg">
  <Text fontWeight="medium" color="white" fontSize="sm">
    Hey There!
  </Text>
</Box>

Responsiveness made easy

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

Know More
Drag the handle to resize →1000px

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
useColorMode.tsx
function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Button onPress={toggleColorMode}>
      {colorMode === "light" ? "Dark" : "Light"} mode
    </Button>
  );
}

Rich component library

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

Explore Storybook
examples.nativebase.io/forms

Powered by React Native ARIA

Out of the Box Accessibility

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

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.

Write once, run everywhere

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.

iOS

iPhone & iPad

Android

Phones & tablets

Web

React Native for Web

One codebase, powered by React Native & React Native for Web.

Everything you need to ship faster

Demos, design kits, premium screens and starter templates — all built with NativeBase.

KitchenSink

A comprehensive demo app showcasing all the NativeBase components in action — buttons, forms, icons and much more.

NativeBase for Designers

A Figma design kit that emulates all of the utility props from NativeBase. Seamlessly integrate style guides, UI components, and pages.

Premium screens to build your next project

Kickstart your next big idea with 100+ responsive and rigorously tested screens built using NativeBase.

Try NativeBase Starter Kit

Test drive NativeBase Startup+ with a free template created by the NativeBase team.

What are people saying?

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

I've never been more impressed by a UI component library than @NativeBaseIO right now. First class support for Skeleton components! 🤯

A

Aman Mittal

@amanhimself

Native base 3.0 🔥🔥. Now I can get the chakra UI feeling on react native too. Lovely work guys! @NativeBaseIO

M

Mazi Juls

@AAjulibe

By the way, NativeBase v3 is really amazing. Especially we love that we can build custom UI components with constraint-based utility-style props. Thank you for creating this wonderful design system :)

I

Ichiro Kimura

@kag_web

Working in a client project with @reactnative using @nativebase and really loving it! Any other suggestion? Will like to see other options too!

N

Nerdjfpb

@nerdjfpb

#NativeBase @nativebase is the best ui library

S

Sandeep

NativeBase made it incredibly easy to ship a consistent UI across platforms. Highly recommend it to any React Native dev.

_

_mayi

@Mayi_Cervantes

We are growing

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

33K+
Downloads
20.4K
Stars
303
Contributors
50K+
Dependents

Our Community

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

Talks and Articles

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!

Invite us to speak

Open source

Built by a community

NativeBase was created by Sanket Sahu and shaped by 300+ contributors who believed in building consistently across platforms.

Sanket Sahu

Creator

Sanket Sahu

Co-founder, GeekyAnts · Building RapidNative

@sanketsahu
GeekyAnts

An OSS-loving, community-driven team of React Native geeks!

Created by GeekyAnts

GeekyAnts is a team of React Native experts who love open-source and solving developer problems. We've been working on React Native since 2015 and have designed and built React Native apps for almost 200+ clients across the globe.

Hire React Native Experts

Our Sponsors

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

ryo kishidaConnor TumblesonMistryYukiya NakagawaLadislav BöhmKonrad KrężelAndre PenaJonas EarendelJesus MateranoGeorgii IvanovJaah Abdul AzeezEwityKazuya KosugeQue NarrasPeniel

More from the Authors

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

The next chapter

NativeBase is now gluestack

Everything we learned building NativeBase lives on in gluestack — copy-paste components and patterns built for flexibility and customizability. NativeBase stays available and stable for existing projects.