Home

Awesome

<img src="./docs/public/amplify-logo.svg" alt="AWS Amplify Logo" style="width:2vw"> AWS Amplify


<p align="center"> <img src="docs/public/svg/favicon.svg" style="width:12vw" alt="Amplify UI logo" /> <h1 align="center">Amplify UI</h1> </p>

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 NameDownloadsVersion
@aws-amplify/ui-react
@aws-amplify/ui-vue
@aws-amplify/ui-angular

Documentation

Getting started

Component Matrix

Connected ComponentsReactReact NativeAngularVue
Authenticator
In-App Messaging
Geo (MapView)
Account Settings
Storage (FileUploader)
Storage (StorageImage)
Liveness (FaceLivenessDetector)
PrimitivesReactAngularVue
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?

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