Skip to content

Create React Native apps UI easily and fastly ⚡️

Ficus UI is a simple, modular, and accessible UI library for React Native, forked from Magnus UI and inspired by Chakra UI

<VStack
  p={10}
  borderWidth={1}
  borderColor="gray.200"
  borderRadius="lg"
  spacing="md"
  bg="white"
>
  <Image
    borderRadius="md"
    source={{ uri: 'https://bit.ly/4dR2Hgy' }}
    w="100%"
    h={200}
    alt="House image"
  />
  <HStack alignItems="center" mt={2} spacing="sm">
    <Badge colorScheme="pink" fontSize="md" p={2}>Plus</Badge>
    <Text
      textTransform="uppercase"
      fontSize="sm"
      fontWeight="bold"
      color="pink.800"
    >
      Cape Town
    </Text>
  </HStack>
  <Text fontSize="xl" fontWeight="bold" lineHeight="short">
    Modern, Chic Penthouse with Pool and Golf park
  </Text>
  <Text fontSize="lg">200$/night</Text>
  <Box flexDirection="row" alignItems="center">
    <Text fontSize="sm">⭐️</Text>
    <Text ml={5} fontSize="sm" fontWeight="bold">
      4.91 (290)
    </Text>
  </Box>
</VStack>
Plus
Cape Town
Modern, Chic Penthouse with Pool and Golf park
200$/night
⭐️
4.91 (290)

Style props

React Native Ficus UI allows you to pass all the style properties as component props. You don't need to create huge StyleSheet objects

Theme support

You can edit the components sizes, colors, borders, ... with your own theme.
Ficus UI logo
❤️
Chakra UI logo

Chakra UI for React Native

React Native Ficus UI provides the support of style props on React Native components and some components implemented as from Chakra UI (with same API).

Responsive has never been easier 🤩

<Box w="100%">
  <Box
    flexDirection="row"
    justify={{ base: 'flex-start', sm: 'center' }}
    my="lg"
  >
    <Box
      flexDirection={{ base: 'column', sm: 'row' }}
      w={{ base: '100%', sm: undefined }}
    >
      <Input
        placeholder="Search location"
        p={10}
        w={{ base: '100%', sm: 300 }}
        borderWidth={2}
        focusBorderColor="teal.500"
      />
      <Button
        colorScheme="teal"
        full={{ base: true, sm: false }}
        mt={{ base: 5, sm: undefined }}
        ml={{ base: undefined, sm: 5 }}
      >
        Search
      </Button>
    </Box>
  </Box>
  <Box mt="lg">
    <ItemCard content={item} w={{ base: '100%', sm: '50%' }} />
  </Box>
</Box>

Customize the theme as you want 🎨

Example of text with font size xs
Example of text with font size sm
Example of text with font size md
Example of text with font size lg
Example of text with font size xl
Example of text with font size 2xl
Example of text with font size 3xl
Example of text with font size 4xl
export const Theme = () => {
  const theme = {
    colors: {
      brand: {
        50: '#ddfff3',
        100: '#b5f6e0',
        200: '#8cf0cd',
        300: '#60e8ba',
        400: '#36e2a6',
        500: '#1dc98d',
        600: '#119c6d',
        700: '#046f4d',
        800: '#00442e',
        900: '#00180e',
      },
      violet: {
        50: '#f0eaff',
        100: '#d1c1f4',
        200: '#b199e7',
        300: '#9171dc',
        400: '#7248d0',
        500: '#592fb7',
        600: '#45248f',
        700: '#311968',
        800: '#1e0f40',
        900: '#0c031b',
      },
    },
    fontSize: {
      'xs': 11,
      'sm': 12,
      'md': 13,
      'lg': 15,
      'xl': 17,
      '2xl': 19,
      '3xl': 21,
      '4xl': 24,
      '5xl': 27,
      '6xl': 32,
    },
  };
 
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  )
};