import all0 from "/src/fragments/ui/web/installation.mdx";

<Fragments fragments={{all: all0}} />

## Usage

<FilterContent framework="react">

```jsx
import React from "react";
import { Amplify } from "aws-amplify";
import {AmplifyS3Album} from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => <AmplifyS3Album />;
```

</FilterContent>

<FilterContent framework="angular">

import all1 from "/src/fragments/ui/angular/configure-module.mdx";

<Fragments fragments={{all: all1}} />

_app.component.html_

```html
<amplify-s3-album></amplify-s3-album>
```

</FilterContent>

<FilterContent framework="vue">

import all3 from "/src/fragments/ui/vue/configure-app.mdx";

<Fragments fragments={{all: all3}} />

_App.vue_

```html
<template>
  <amplify-s3-album />
</template>
```

</FilterContent>

<UiComponentProps tag="amplify-s3-album" propType="attr" useTableHeaders></UiComponentProps>

<UiComponentProps tag="amplify-s3-album" propType="css" useTableHeaders></UiComponentProps>

## Migration

To migrate from using the `aws-amplify-<framework>` library to the latest `@aws-amplify/ui-<framework>` library use the steps below:

import all4 from "/src/fragments/ui/web/installation-diff.mdx";

<Fragments fragments={{all: all4}} />

### Usage

<FilterContent framework="react">

```diff
- import { S3Album } from 'aws-amplify-react';
+ import { AmplifyS3Album } from '@aws-amplify/ui-react';

const App = () => (

+ <AmplifyS3Album />
- <S3Album />

);
```

</FilterContent>

<FilterContent framework="angular">

import all5 from "/src/fragments/ui/angular/configure-module-diff.mdx";

<Fragments fragments={{all: all5}} />

_app.component.html_

```diff
+ <amplify-s3-album></amplify-s3-album>
- <s3-album></s3-album>
```

</FilterContent>

<FilterContent framework="vue">

import all7 from "/src/fragments/ui/vue/configure-app-diff.mdx";

<Fragments fragments={{all: all7}} />

_App.vue_

```diff
 <template>
- <s3-album />
+ <amplify-s3-album />
 </template>
```

</FilterContent>