Usage

Feedback

React and Amplify UI

Amplify UI is designed to integrate seamlessly with the React framework so you can get started in no time.

Installation

If you haven't already, 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

Quick start

Here's all you need to get up and running:

import * as React from 'react';
import { Button } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return <Button variation="primary">Hello world</Button>;
}

export default App;

Copy/paste the code above into your React app, start the app, and look at that lovely Button!

Components

You can use all of Amplify UI's primitive components (e.g., Button, Tabs, Flex) right out-of-the-box. These are the same components we use to build our connected components such as the Authenticator. Please refer to each component's documentation to see how they should be imported, configured and styled.

import * as React from 'react';
import { Button } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <Button
      ariaLabel="Add item to cart"
      backgroundColor="#ffd811"
      borderRadius="1rem"
      color="black"
      fontWeight="normal"
      onClick={() => alert('Added to cart! ✅')}
      size="small"
      width="8rem"
    >
      Add to Cart
    </Button>
  );
}

export default App;

Theming

Amplify UI ships with a default theme that you can customize to match the look and feel of your project. Remember to load the default styling by importing our CSS at the entry-point to your application (e.g., src/App.js).

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

To learn how to customize the appearance of all components in your application with a theme, see theming.

import { Button, ThemeProvider } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css'; // default theme

const theme = {
  name: 'custom-button-theme',
  tokens: {
    components: {
      button: {
        // this will affect the font weight of all Buttons
        fontWeight: { value: '{fontWeights.black.value}' },
        // this will only style Buttons which are the "primary" variation
        primary: {
          backgroundColor: { value: 'rebeccapurple' },
          _hover: {
            backgroundColor: { value: 'hotpink' },
          },
        },
      },
    },
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variation="primary">Custom button</Button>
    </ThemeProvider>
  );
}

export default App;