81 components available.
An inline notification banner for displaying feedback messages.
<cs-alert> A vertical navigation component for linking to sections on the same page.
<cs-anchor-navigation> A context provider that enables tutorial annotations on child components.
<cs-annotation-context> A page layout shell with navigation, tools panel, and content slots.
<cs-app-layout> A page layout shell with navigation, tools panel, drawers, and a toolbar grouping all triggers.
<cs-app-layout-toolbar> A dynamic form that lets users add, edit, and remove key-value attribute rows.
<cs-attribute-editor> A text input that displays a dropdown of suggestions as the user types.
<cs-autosuggest> A small label that displays a status or count.
<cs-badge> A layout primitive for spacing, typography, and color — the building block of every Cloudscape layout.
<cs-box> A navigation trail showing the current page location within a hierarchy.
<cs-breadcrumb-group> A clickable element that triggers an action or navigates to a URL.
<cs-button> A button that opens a dropdown menu of actions.
<cs-button-dropdown> A group of icon buttons for related actions.
<cs-button-group> A month-view calendar that lets users select a single date.
<cs-calendar> A collection of cards for displaying items in a grid layout.
<cs-cards> A control that allows toggling between checked, unchecked, and indeterminate states.
<cs-checkbox> A code editing area with syntax highlighting and language support.
<cs-code-editor> A gear icon trigger that opens a preferences panel for configuring collection display options.
<cs-collection-preferences> A responsive multi-column layout for organizing content.
<cs-column-layout> A content wrapper with optional header and footer sections.
<cs-container> A page-level layout with an optional overlapping header.
<cs-content-layout> A button that copies specified text to the clipboard.
<cs-copy-to-clipboard> A text input that accepts a date value in a specified format.
<cs-date-input> A form control that lets users select a single date from a dropdown calendar.
<cs-date-picker> A form control that lets users select a date range or choose a relative time range.
<cs-date-range-picker> A panel with header and content, used inside app-layout for tools and split views.
<cs-drawer> A collapsible container that reveals or hides content on toggle.
<cs-expandable-section> A drag-and-drop zone for uploading files.
<cs-file-dropzone> A file picker for uploading one or more files.
<cs-file-input> A collection of uploaded files displayed as dismissible tokens.
<cs-file-token-group> A form control that lets users select and upload files.
<cs-file-upload> A stacked notification bar for displaying multiple flash messages.
<cs-flashbar> A container that structures form content with a header and action buttons.
<cs-form> A wrapper that provides label, description, error, and constraint text for form controls.
<cs-form-field> A responsive grid layout for arranging content in columns.
<cs-grid> A page or section heading with optional counter and description.
<cs-header> A panel for displaying contextual help content alongside the main page.
<cs-help-panel> A pulsing indicator that highlights interactive elements during tutorial steps.
<cs-hotspot> Renders a built-in or custom SVG icon in various sizes and colors.
<cs-icon> A single-line text field for capturing user input.
<cs-input> Displays a single piece of content in a structured, visual card format.
<cs-item-card> A layout for displaying labeled key-value data in a structured format.
<cs-key-value-pairs> A styled anchor element for navigation within and outside the application.
<cs-link> A component for displaying a list of items with optional icons and secondary content.
<cs-list> An ARIA live region that announces content changes to screen readers.
<cs-live-region> A dialog overlay that requires user interaction before returning to the main content.
<cs-modal> A dropdown control that lets users choose multiple options from a list.
<cs-multiselect> Page navigation controls for paginated content.
<cs-pagination> A resizable split layout with a main content area and a side panel.
<cs-panel-layout> A contextual popup that displays additional information on click.
<cs-popover> A horizontal bar that indicates the progress of an operation.
<cs-progress-bar> A text input designed for conversational AI prompt entry.
<cs-prompt-input> A filter input with token-based filtering for collections.
<cs-property-filter> A group of radio buttons for selecting a single option from a list.
<cs-radio-group> An S3 path input with a browse modal for selecting buckets, prefixes, and objects.
<cs-s3-resource-selector> A toggle control that lets users switch between a set of related options.
<cs-segmented-control> A dropdown control that lets users choose a single option from a list.
<cs-select> A vertical navigation tree for application sections and pages.
<cs-side-navigation> A range input for selecting a numeric value within a defined range.
<cs-slider> Distributes child elements with consistent spacing in a vertical or horizontal direction.
<cs-space-between> An animated loading indicator available in multiple sizes.
<cs-spinner> A resizable panel displayed at the bottom or side of the page.
<cs-split-panel> Displays a status icon with accompanying text to communicate state.
<cs-status-indicator> A step indicator for multi-step workflows and wizards.
<cs-steps> A data table with sortable columns, selection, and pagination support.
<cs-table> A tabbed interface for switching between related content panels.
<cs-tabs> A form control that lets users add, edit, and remove resource tags as key-value pairs.
<cs-tag-editor> Applies Cloudscape typography styles to native HTML elements within it.
<cs-text-content> A search input for filtering lists and table content.
<cs-text-filter> A multi-line text field for longer form input.
<cs-textarea> A tile-based selection control for choosing a single option with visual prominence.
<cs-tiles> A time picker for entering hours, minutes, and optional seconds.
<cs-time-input> An on/off switch control for binary settings.
<cs-toggle> A button that toggles between pressed and unpressed states.
<cs-toggle-button> A compact label representing a selected value or tag.
<cs-token> A collection of tokens displayed in a horizontal or vertical layout.
<cs-token-group> A lightweight popup that shows additional information on hover or focus.
<cs-tooltip> A horizontal navigation bar with identity, search, and utility actions.
<cs-top-navigation> A hierarchical tree of expandable and collapsible items.
<cs-tree-view> A panel that displays a list of available tutorials and tracks completion progress.
<cs-tutorial-panel> A multi-step form flow that guides users through a sequential process.
<cs-wizard>