MCPcopy Index your code
hub / github.com/cloudscape-design/components

github.com/cloudscape-design/components @3.0.1323

Chat with this repo
repository ↗ · DeepWiki ↗ · release 3.0.1323 ↗ · + Follow
8,676 symbols 27,637 edges 2,965 files 317 documented · 4%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

React components for Cloudscape Design System

This package contains the source code of the React components for the Cloudscape Design System.

Cloudscape is an open source design system for building intuitive, engaging, and inclusive user experiences at scale. It consists of an extensive set of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.

Cloudscape was built for and is used by Amazon Web Services (AWS) products and services. We created it in 2016 to improve the user experience across AWS web applications, and also to help teams implement those applications faster. Since then, we have continued enhancing the system based on customer feedback and research.

Components APIs and guidelines can be found in the Components section of the Cloudscape website.

Getting started

For an in-depth guide on getting started with Cloudscape development, check out the Cloudscape website.

Installation

All Cloudscape packages are available on npm.

npm install @cloudscape-design/components @cloudscape-design/global-styles

Using Cloudscape components

Here is a basic example that renders a primary button:

import Button from '@cloudscape-design/components/button';
import '@cloudscape-design/global-styles/index.css';

function App() {
  return <Button variant="primary">Click me</Button>;
}

You can also play around with a small example on CodeSandbox:

Edit on CodeSandbox

Getting help

You can create bug reports or feature requests, or start a discussion to ask a question. To minimize duplicates, we recommend that you search for existing bug reports, feature requests, or discussions before initiating a new thread.

Contributing

The contribution guidelines contains information on how to contribute, as well as our support model and versioning strategy.

License

This project is licensed under the Apache 2.0 License.

Extension points exported contracts — how you extend this code

TokenModeProps (Interface)
Props for the token-mode contentEditable input and its associated menu dropdown.
src/prompt-input/components/token-mode.tsx
ReadonlyAsyncStore (Interface)
(no doc) [1 implementers]
src/area-chart/async-store/index.ts
CSSProperties (Interface)
(no doc)
types/custom-css-properties.d.ts
ExtendedWindow (Interface)
(no doc)
pages/options-list/simple.page.tsx
CustomAlertProps (Interface)
(no doc)
pages/alert/style-custom-types.page.tsx
ButtonWithTooltipProps (Interface)
(no doc)
pages/tooltip/simple.page.tsx
CustomLinkProps (Interface)
(no doc)
pages/link/style-custom-types.page.tsx
ScreenshotAreaProps (Interface)
(no doc)
pages/utils/screenshot-area.tsx

Core symbols most depended-on inside this repo

click
called by 2358
src/test-utils/dom/action-card/index.ts
focus
called by 782
src/button-group/interfaces.ts
findNativeInput
called by 780
src/test-utils/dom/tiles/tile.ts
render
called by 569
src/attribute-editor/row.tsx
findDropdown
called by 398
src/date-range-picker/__integ__/page-objects/date-range-picker-page.ts
findDropdown
called by 351
src/test-utils/dom/autosuggest/index.ts
setUrlParams
called by 333
pages/app/app-context.tsx
findItems
called by 298
src/test-utils/dom/list/index.ts

Shape

Function 4,941
Method 1,574
Interface 1,513
Class 644
Enum 4

Languages

TypeScript100%

Modules by API surface

src/tag-editor/__integ__/page/tag-editor-page.ts45 symbols
src/test-utils/dom/date-range-picker/index.ts38 symbols
src/test-utils/dom/property-filter/index.ts36 symbols
src/test-utils/dom/table/index.ts35 symbols
src/table/interfaces.tsx34 symbols
src/property-filter/__tests__/extended-wrapper.ts33 symbols
src/prompt-input/core/menu-state.ts31 symbols
src/date-picker/__integ__/page-objects/date-picker-page.ts31 symbols
src/test-utils/dom/top-navigation/index.ts30 symbols
src/test-utils/dom/internal/dropdown-host.ts28 symbols
src/prompt-input/core/caret-controller.ts28 symbols
src/internal/components/masked-input/utils/mask-format.ts28 symbols

For agents

$ claude mcp add components \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact