DOCSEARCHbyAlgolia
Submit Docs

AWS UI

repository·main·Indexed 42 days ago

https://github.com/aws/awsui-documentation

A collection of React components and design resources for building consistent, accessible, and responsive user interfaces for AWS services. This library includes packages such as @awsui/components-react, @awsui/global-styles, @awsui/collection-hooks, and @awsui/design-tokens. Note: AWS UI is deprecated and is transitioning to the Cloudscape Design System.

Tokens
53K
Snippets
88
Records
289
Agent score
52%

What's inside AWS UI

  1. Use the Box component for layout and styling

    main

    The Box component is used to display and style basic elements and containers while adhering to the design system's typography and spacing strategies. It can act as a wrapper for content or be used to create specific HTML elements via the variant prop.

    Key capabilities include:

    • Controlling spacing via margin and padding.
    • Overriding typography with fontSize and fontWeight.
    • Managing layout with display, float, and textAlign.
    • Setting semantic HTML tags using variant or tagOverride.

  3. Use the FormField component

    main
    The FormField component is used to create properly styled and accessible form controls. It manages the layout for labels, descriptions, error messages, and the primary input control. It supports a primary control and an optional secondary control, which can be laid out side-by-side or stacked depending on the stretch property.

  4. Use the Grid component for responsive layouts

    main
    The Grid component is a flexible layout tool used to distribute content across a page, ensuring consistent and responsive designs. It uses a 12-column system where you define how many columns each element spans or offsets via the gridDefinition property.

  5. Use the SideNavigation component

    main
    The SideNavigation component provides a list of navigational links for application pages. It supports various item types including links, dividers, sections, and expandable groups. You can control the active state via the activeHref property, which automatically highlights matching links and expands their parent containers.