Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Get started


  • For designers

    • Start designing
    • Design resources

  • For developers

    • Start developing
    • Using Cloudscape components
    • Global styles
    • Built-in internationalization

  • Testing

    • Introduction to testing
    • Testing frameworks integration
    • Testing classes

  • Development guides

    • Bidirectionality
    • Charts migration
    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index
  1. Cloudscape Design System
    • Get started
    • For developers: Start developing
    1. Cloudscape Design System
    2. Get started
    3. For developers: Start developing

    Start developing

    Welcome to Cloudscape. Let’s start building. Here you'll find links to integrate with the system, view patterns and demos to see how the system looks in practice, and links to additional documentation.

    Published: May 31, 2022

    On this page

    1. Integrate with the system
    2. Explore the system
    3. Next steps

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Integrate with the system

    Image for Installing packagesImage for Installing packages

    Using Cloudscape components

    To use Cloudscape components, first install a set of packages.

    componentscomponents

    Components

    Our tested React components are an implementation of our design patterns and guidelines.

    Explore the system

    Components

    Our tested React components are an implementation of our design patterns and guidelines.

    demosdemos

    Demos

    Get a sense of how the system looks from our coded demo pages.

    Next steps

    Using Cloudscape components

    Learn how to use Cloudscape components in React.

    Global styles

    Use the Cloudscape global styles package to apply foundational CSS to pages.

    Built-in internationalization

    Ensures consistent visual labels on Cloudscape components throughout your application, and also provides accessible text for many components that may otherwise have been missed.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS