AI prompts
base on Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud. <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>
[](LICENSE)
[](https://discord.gg/jWVbPfC)
[](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+is%3Aopen+label%3Abug)
[](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen)
[](https://github.com/aws-amplify/amplify-ui/milestone/1)
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](https://www.npmjs.com/package/@aws-amplify/ui-react) |  |  |
| [@aws-amplify/ui-vue](https://www.npmjs.com/package/@aws-amplify/ui-vue) |  |  |
| [@aws-amplify/ui-angular](https://www.npmjs.com/package/@aws-amplify/ui-angular) |  |  |
## Documentation
- https://ui.docs.amplify.aws/
## Getting started
- https://ui.docs.amplify.aws/getting-started/installation
## Component Matrix
| **Connected Components** | **React** | **React Native** | **Angular** | **Vue** |
| :------------------------------ | :-------: | :--------------: | :---------: | :-----: |
| Authenticator | ✅ | ✅ | ✅ | ✅ |
| In-App Messaging | ✅ | ✅ | | |
| Geo (MapView) | ✅ | | | |
| Account Settings | ✅ | | | |
| Storage (FileUploader) | ✅ | | | |
| Storage (StorageImage) | ✅ | | | |
| 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](https://www.w3.org/WAI/standards-guidelines/wcag/) and [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) 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](https://tailwindcss.com/), [Chakra](https://chakra-ui.com/), [Supabase](https://ui.supabase.io/), [Radix](https://www.radix-ui.com/), [Adobe Spectrum](https://react-spectrum.adobe.com/), [Material-UI](https://material-ui.com/), 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](https://github.com/aws-amplify/amplify-ui/issues/new)
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
- [CONTRIBUTING.md](/CONTRIBUTING.md)
", Assign "at most 3 tags" to the expected json: {"id":"11747","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"