Themeable, accessible components
Ready to connect to the cloud
Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
npm i @aws-amplify/ui-react aws-amplifySpeed up development with over
40 production-ready components
Amplify UI components are built with plain React and CSS to provide a solid foundation for building UIs and design systems. These components are themeable, responsive, composable, and accessible. They play nicely with other UI components or styling frameworks.
Authentication made easy
Add authentication to your app in under 10 lines of code using the Authenticator component. The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend, no extra configuration needed! Customize every detail of the authentication flow with themes, overrides, or bring your own UI with a headless mode.
Theming controls to match your brand
Create a unique look-and-feel for your application in minutes. Amplify UI uses design tokens and plain CSS so every detail can be customized. Dynamic theming for dark mode, responsive, and user preferences is easy with theme overrides.
Build UI visually in Figma
With Amplify Studio you can design components in Figma, bind them to your data, and generate production-ready React code. Go from design to production-ready code in minutes and eliminate the design-development gap.
AWS Amplify
$99
Product
Product.title
Product.rating
Product.price
<ProductCard />Better together with AWS Amplify
Build your application visually in Amplify Studio
Deploy and manage your app backend with a GraphQL API, User login, File storage and more in minutes. Start small and build to the full scale of AWS! Build components visually in Figma, bind them to your data, and use them in your codebase.
Learn more about Amplify Studio
Connect your UI to your backend with Amplify libraries.
Amplify Libraries offer an opinionated and declarative interfaces to connect to your backend. The libraries are pluggable and can be extended to use other providers.
Learn more about Amplify Libraries
Deploy your front-end in minutes with Amplify Hosting.
Fully managed web hosting with full-stack CI/CD. Amplify Hosting has support for common SPA and SSG frameworks like Next.js, Gatsby, and Eleventy.
Learn more about Amplify Hosting
Accessibility built-in
Amplify UI components follow WCAG and WAI-ARIA best practices to ensure all users can use your application.
Color contrast
All components have AA or higher contrast in both light and dark mode
Keyboard navigation
Interactive components support keyboard navigation users would expect
Focus management
Focusable components have proper focus states and interactivity
Accessible labels
Form fields and icons have accessible labels, plus there are utilities to help make sure your application is labelled.
Compatible with your front-end
Escape hatches
Connected components like the Authenticator have headless, or UI-less, implementations that handle complex state management and leave the UI up to you.
Styling optional
Don‘t like our style? Throw it out and use your own! Amplify UI components use plain CSS so you have complete control over the styling.
TypeScript & IntelliSense
Let your IDE do the work for you and make UI development a breeze with strongly typed interfaces and inline documentation.