Ant Design Amplify Components

Zohaib Ijaz
Oct 8, 2018 · 2 min read

What is amplify?

Amplify is an Aws library which makes it easy for you to manage authentication, storage, api, analytics and more in browser on client side. They provide a React components library aws-amplify-react for Authentication which includes all comoponents like SiginIn, SignOut, ConfirmSignUp etc.


It allows us to pass style object in standard format to style different compnents. This works great but if you are using Ant Deisgn then matching theme with your application is not that easy and you have to pass all that css rules in form of javascript object and still there will be some missing styles like hover effect, loading state, disabled button on submit . I was facing same issues so I created my own components library using Ant Design components and Aws Amplify.


This library provides Authentication components (AuthFlow, SignIn, SignOut, ConfirmSignUp, ResetPassword and RequireNewPassword) for React applications using Ant Design.

You can use default style/theme or your can simply override Ant Design styles using css/less/scss and if you still think that you need more controll, copy the components’ code and modify the container components or buttons whatever you want and you are good to go.


This is a humble effort to contribute in React and Ant Design echosystem. I hope you like this. Feel free to share your thought and issues on github.

You can do 50 👏 👏 👏 so don’t forget to 👏 and⭐ ⭐️ ⭐️ on Github

Stay Happy :)

Zohaib Ijaz

Written by

Sr. Software Engineer | Python/Javascript | github/mzohaibqc |

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade