Amplify UI

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

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

Language

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.

https://localhost

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.

$29.9920% off

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.

ProductCard

AWS Amplify

3.5 out of 5 rating

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

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.