Amplify UI is an open-source UI library that brings the simplicity and extensibility of AWS Amplify to UI development. It consists of connected components that simplify complex workflows like authentication and dynamic data, primitive components that form the building blocks of a UI, and themes to make Amplify UI fit any brand. Extensibility and customization are at the forefront of Amplify UI allowing easy integration into any application regardless of the front-end tech stack.
We want to take care of the details, like accessibility and cloud connectivity, so developers can focus on their product.
Connected components
Amplify UI connected components abstract away complex front-end code like authentication and dynamic data to provide an intuitive API. Connected components are built on top of primitive components and Amplify Libraries.
Connected components are completely customizable at every layer. Customize the look-and-feel with theming controls, override components and function calls, bring your own UI with a headless mode, or even go un-styled, giving you full control over state, layout, styling, and transitions.
Primitive components
Primitive components are React-only for now
Amplify UI primitive components are in the middle of the spectrum between 'headless' UI frameworks like Radix and Headless UI, and 'batteries included' frameworks like MUI and Chakra. We want to provide a solid base that doesn't force a particular front-end architecture and every detail can be customized.
All the styling is handled by plain CSS and themeable with CSS variables. However we do provide some extra styling utilities in React-like responsive style props, ThemeProvider and useTheme hook, and useBreakpointValue for responsive values.
Amplify UI primitive components adhere to WCAG (Web Content Accessibility Guidelines) and WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) specifications for accessibility including color contrast for low-vision users, and accessible labels, keyboard navigation, and focus state management for keyboard-only users.
Tenets
Minimal footprint, maximum performance Good components are fast and use native styling systems when possible, adding less dependencies, smaller memory footprint, and minimizing side effects.
Escape Hatches over ejections Users should be able to control any aspect of our components using their favorite tools without throwing everything away. We meet users where they are and play nicely with platforms and frameworks.
Accessible by default Component implementations follows platform accessibility standards and best practices (e.g. WCAG 2.1AA for Web, Apple HIG for iOS).
Respect the platform We want to share as much as possible between platforms (like themes and schemas), and respect each platform identity and rules when possible (e.g. following name conventions and idioms). For example, React components should feel like React components.
Current status
Currently, the Authenticator is available for React, Angular, Vue, Flutter and Swift. The Android and React Native Authenticators are currently in developer preview. Primitive components are available for React, with Angular, Vue, and React Native coming soon.
If you are an Angular or Vue developer and want to get started, they share the same CSS as React so with the right class names (we use BEM syntax) you can at least get the styling and theming that React has!
Roadmap
Upcoming projects include:
- React Native Authenticator
- Improved Storage components for React, Angular, and Vue
- Primitives and theming for Angular and Vue
- Data components and hooks for React
- More primitives
If you would like to see something on our roadmap, let us know on Github.