Amplify UI Home

Amplify UI is an open-source design system with cloud-connected components and primitives that simplify building accessible, performant, and beautiful applications in React, Angular, and Vue (more coming soon).

Take it for a test drive

import { AmplifyProvider, Button, Card, Text, Heading, Flex, Badge, createTheme, Image, View, StepperField, Rating, useTheme } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import { theme } from './theme';

const Example = () => {
  const { tokens } = useTheme();
  return (
    <Card>
      <Flex direction="row" alignItems="flex-start">
        <Image src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=930&q=80"
          width="8rem"/>
        <Flex direction="column" gap={tokens.space.xs}>
          <Flex direction="row">
            <Badge variation="success">New</Badge>
          </Flex>
          <Heading level={3}>
            Product title
          </Heading>
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque risus in sem dapibus, nec vestibulum metus mattis. Mauris dignissim maximus tellus, in feugiat nibh rhoncus a.</Text>
          <Flex direction="row" alignItems="center">
            <Text
              fontSize={tokens.fontSizes.large}
              color={tokens.colors.font.secondary}>
              $199.99
            </Text>
            <StepperField
              label="Stepper"
              defaultValue={1}
              min={0}
              max={10}
              step={1}
              labelHidden
            />
            <Button variation="primary">Add to cart</Button>
          </Flex>
        </Flex>
      </Flex>
    </Card>
  )
}

export default function App() {
  return (
    <AmplifyProvider theme={theme}>
      <Example />
    </AmplifyProvider>
  )
}

Cloud-Connected Components

Simplify complex cloud-connected workflows like authentication with minimal boilerplate code.

Authenticator

Theming

Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.

Get started with theming
AvailableNew

4 out of 5 rating

Primitive Components

Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.

Get started with components

Accessibility

Amplify UI components follow WCAG and WAI-ARIA best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management.

Looking for other Amplify Products?

GithubDiscord
Amplify open source, documentation and community are supported by Amazon Web Services © 2021, Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.
Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.