/amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

Primary LanguageTypeScriptApache License 2.0Apache-2.0

AWS Amplify Logo AWS Amplify


Amplify UI logo

Amplify UI

GitHub Discord Open Bugs Feature Requests GA milestone

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application. Amplify UI consists of:

  1. Connected components that simplify complex cloud-connected workflows, like Authenticator.
  2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
  3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
  4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.
Package Name Downloads Version
@aws-amplify/ui-react
@aws-amplify/ui-vue
@aws-amplify/ui-angular

Documentation

Getting started

Component Matrix

Connected Components React React Native Angular Vue
Authenticator
In-App Messaging
Geo (MapView)
Account Settings
Storage (StorageManager)
Liveness (FaceLivenessDetector)
Primitives React Angular Vue
Alert
Autocomplete
Badge
Button
Card
CheckboxField
Collection
Divider
Expander
Flex
Grid
Heading
HighlightMatch
Icon
Image
Link
Loader
Menu
Pagination
PasswordField
PhoneNumberField
Placeholder
RadioGroupField
Rating
ScrollView
SearchField
SelectField
SliderField
StepperField
SwitchField
Table
Tabs
Text
TextAreaField
TextField
ToggleButton
View
VisuallyHidden

Frequently asked questions

What are the major benefits of the new version of Amplify UI?

  • Better developer experience Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application.
  • Endlessly customizable Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with themes, override components with your own, or build your own UI and use Amplify for complex state management.
  • Accessible Amplify UI components follow WCAG and WAI-ARIA best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management.
  • Primitive components (React only right now) Primitive components are used in the connected components, like Authenticator, you can also customize them and use them to build the rest of your UI.

Why are you building primitives?

We are building more cloud-connected components and want to have consistency between them, while also allowing you to build your UI with the same primitives so you can have a consistent UI development experience.

How does this compare to other UI libraries like Tailwind, Chakra, Supabase, or Material-UI?

Amplify UI consists of both primitive components like Buttons, Badges, and Cards, as well as cloud-connected and data-bound components like the Authenticator. We are taking heavy inspiration from open-source frameworks like Tailwind, Chakra, Supabase, Radix, Adobe Spectrum, Material-UI, and others. In fact, one of the core ideas with the new Amplify UI is the ability to integrate seamlessly into any application, including ones using those UI frameworks. For example, you can use Tailwind classes to style Amplify UI components or Chakra components like buttons inside Amplify connected-components like the Authenticator.

Where should I file bugs and requests?

Bugs and feature requests for Amplify UI

You can also use the above link to report a bug or a feature request for previous version of Amplify UI Components.

As we continue to work on the new Amplify UI we will move UI-related issues in the amplify-js repository over here to work on them. We will continue to maintain major bug and security fixes for all existing UI packages and versions. New development for UI components will happen in this repository and eventually be published under the @react npm tag.

Contributing