Installation

Dependencies

Packages

Install @aws-amplify/ui-react with npm or yarn:

npm install @aws-amplify/ui-react aws-amplify

yarn add @aws-amplify/ui-react aws-amplify

After adding the aws-amplify and @aws-amplify/ui-react dependencies you are now ready to add any of our components to your application.

Styles

Amplify UI ships with a default theme that you can customize to match the look and feel of your project.

Modern bundlers like Create React App & Next.js allow you to import .css from within your .js files. This may be src/index.js, src/App.js, pages/_app.js, or whatever your entry-point is.

import '@aws-amplify/ui-react/styles.css';

You can import .css from within your .css files using @import. This may be src/index.css, src/styles/styles.css, or whatever your global stylesheet is.

@import "@aws-amplify/ui-react/styles.css";

CSS Layers

CSS Layers are a new feature of the CSS spec that make it easy to override styles without needing to use a higher specificity. This means you don't have to worry about making sure your CSS selectors are specific enough to override the CSS selectors in Amplify UI's styles. Support for CSS Layers is pretty good, but we are introducing this as an opt-in feature. All CSS files have a regular CSS file version and a version with CSS Layers. To use CSS Layers with the example above, you would change the imports to this:

import '@aws-amplify/ui-react/styles/reset.layer.css' // global CSS reset
import '@aws-amplify/ui-react/styles/base.layer.css' // base styling needed for Amplify UI
import '@aws-amplify/ui-react/styles/button.layer.css' // component specific styles

You can also use this for the main CSS export, '@aws-amplify/ui-react/styles.layer.css'.

Fonts

By default, Amplify UI does not bundle a font so that you can choose which font to use in your application and how you want to load the font. The default theme references the Inter font because it works well for UI design and is offered as a variable font. The easiest way to add the Inter font to your application is to use the Google Fonts CDN:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap"
  rel="stylesheet"
/>

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

You can also install it as an NPM dependency:

npm install @fontsource/inter

yarn add @fontsource/inter

Then import the variable font in your application:

import '@fontsource/inter/variable.css';

Check out Fontsource for more information and documentation on this library.

If you want to enable OpenType features like alternative styles, you can use the font directly from the creator's website: https://rsms.me/inter/

@import url('https://rsms.me/inter/inter.css');

html {
  /* this enables some alternative styles and contextual characters to the font */
  font-feature-settings: 'ss01', 'ss02', 'case', 'salt';
}