### Example React DOM App Implementation

Source: https://cds.coinbase.com/getting-started/installation

A complete example of a React DOM application demonstrating the integration of CDS with the default theme. It includes all necessary imports for styles, providers, and rendering the application root.

```javascript
import '@coinbase/cds-icons/fonts/web/icon-font.css';  
import '@coinbase/cds-web/defaultFontStyles';  
import '@coinbase/cds-web/globalStyles';  
import { createRoot } from 'react-dom/client';  
import { ThemeProvider, MediaQueryProvider } from '@coinbase/cds-web/system';  
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';  
import App from './App';  
  
const root = createRoot(document.getElementById('root'));  
  
root.render(  
  <MediaQueryProvider>  
    <ThemeProvider theme={defaultTheme} activeColorScheme="light">  
      <App />  
    </ThemeProvider>  
  </MediaQueryProvider>,  
);  
```

--------------------------------

### Install CDS Web with Yarn

Source: https://cds.coinbase.com/getting-started/installation

Installs the CDS web library and framer-motion using Yarn. framer-motion is a dependency for certain CDS components.

```bash
yarn add @coinbase/cds-web framer-motion@^10  
```

--------------------------------

### Verify CDS Installation with a Button Component

Source: https://cds.coinbase.com/getting-started/installation

Renders a simple CDS Button component to verify that the installation and setup were successful. This serves as a basic check for the library's functionality.

```javascript
import { Button } from '@coinbase/cds-web/buttons';  
  
const Test = () => <Button>Click Me</Button>;  
```

--------------------------------

### Install CDS Web with npm

Source: https://cds.coinbase.com/getting-started/installation

Installs the CDS web library and framer-motion using npm. framer-motion is a dependency for certain CDS components.

```bash
npm install @coinbase/cds-web framer-motion@^10  
```

--------------------------------

### Set up ThemeProvider and MediaQueryProvider

Source: https://cds.coinbase.com/getting-started/installation

Configures the root of the React application with ThemeProvider and MediaQueryProvider. ThemeProvider manages application themes and color schemes, while MediaQueryProvider handles responsive design based on media queries.

```javascript
import { ThemeProvider, MediaQueryProvider } from '@coinbase/cds-web/system';  
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';  
import App from './App';  
  
const Index = () => (  
  <MediaQueryProvider>  
    <ThemeProvider theme={defaultTheme} activeColorScheme="light">  
      <App />  
    </ThemeProvider>  
  </MediaQueryProvider>  
);  
  
export default Index;  
```

--------------------------------

### React App Setup with CDS Web Components

Source: https://cds.coinbase.com/getting-started/introduction

This snippet demonstrates how to set up a basic React application using components from the Coinbase Design System (CDS) web library. It shows the usage of ThemeProvider for theming, Box for layout, Text for typography, and Button for interactive elements. Ensure you have '@coinbase/cds-web' installed as a dependency.

```jsx
import { ThemeProvider } from '@coinbase/cds-web';
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
import { Box } from '@coinbase/cds-web/layout';
import { Text } from '@coinbase/cds-web/typography';
import { Button } from '@coinbase/cds-web/buttons';

const App = () => (
  <ThemeProvider theme={defaultTheme} activeColorScheme="light">
    <Box padding={4} background="bgPrimary" borderRadius={200}>
      <Text font="title1" color="fg">
        Welcome to CDS
      </Text>
      <Button variant="positive" marginTop={2}>
        Get started
      </Button>
    </Box>
  </ThemeProvider>
);

```

--------------------------------

### Import Global and Icon Styles

Source: https://cds.coinbase.com/getting-started/installation

Imports essential global and icon styles required for CDS components to render correctly. These should be imported near your application's entry point.

```javascript
import '@coinbase/cds-icons/fonts/web/icon-font.css';  
import '@coinbase/cds-web/globalStyles';  
```

--------------------------------

### TextInput with Start Content Examples

Source: https://cds.coinbase.com/components/inputs/TextInput

Provides examples of different types of content that can be placed at the start of a TextInput field, including Asset objects, Icons, and IconButtons. These are used to enhance functionality and user interaction. Dependencies include Avatar, InputIcon, and InputIconButton.

```jsx
function StartContentExamples() {
  return (
    <VStack gap={3}>
      <VStack>
        <Text as="p">
          <strong>Asset</strong>: Asset objects are not interactive
        </Text>
        <TextInput
          label="Address"
          start={
            <Box paddingX={2}>
              <Avatar
                size="l"
                src="https://dynamic-assets.coinbase.com/e785e0181f1a23a30d9476038d9be91e9f6c63959b538eabbc51a1abc8898940383291eede695c3b8dfaa1829a9b57f5a2d0a16b0523580346c6b8fab67af14b/asset_icons/b57ac673f06a4b0338a596817eb0a50ce16e2059f327dc117744449a47915cb2.png"
                alt="address"
              />
            </Box>
          }
          placeholder="HaeJiWplJohn6W42eCq0Qqft0"
        />
      </VStack>

      <VStack>
        <Text as="p">
          <strong>Icon</strong>: Icon objects are not interactive.
        </Text>
        <TextInput label="Amount" start={<InputIcon name="cashUSD" />} placeholder="1234" />
      </VStack>

      <VStack>
        <Text as="p">
          <strong>IconButton</strong>: The most common use case for Icon Button at the start of a
          Text Field is search.
        </Text>
        <TextInput
          label="Search"
          start={<InputIconButton name="search" />} 
          placeholder="Search for anything"
        />
      </VStack>
    </VStack>
  );
}
```

--------------------------------

### ProgressBarWithFixedLabels Examples

Source: https://cds.coinbase.com/components/feedback/ProgressBarWithFixedLabels

Illustrates the usage of ProgressBarWithFixedLabels with different label placements ('below' and 'beside'). It shows how to configure the start and end labels and the progress bar itself. This example assumes basic knowledge of React and the @coinbase/cds-web component library.

```jsx
<VStack gap={2}>
  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="below">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFixedLabels>
  <ProgressBarWithFixedLabels endLabel={20} labelPlacement="below">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFixedLabels>
</VStack>
```

```jsx
<VStack gap={2}>
  <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="beside">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFixedLabels>
  <ProgressBarWithFixedLabels endLabel={20} labelPlacement="beside">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFixedLabels>
</VStack>
```

--------------------------------

### Portal Modal Example using @coinbase/cds-web

Source: https://cds.coinbase.com/components/overlay/Modal

This example shows how to use a portal modal, which is managed using a custom hook `useModal`. It demonstrates opening a modal programmatically with its content defined inline.

```javascript
function Example() {
  const { openModal, closeModal } = useModal();

  const handlePress = useCallback(
    ()
      openModal(
        <Modal visible onRequestClose={closeModal}>
          <ModalHeader closeAccessibilityLabel="Close" title="Default Modal" />
          <ModalBody>Body contents go here</ModalBody>
          <ModalFooter
            primaryAction={<Button onClick={closeModal}>Save</Button>}
            secondaryAction={
              <Button onClick={closeModal} variant="secondary">
                Cancel
              </Button>
            }
          />
        </Modal>,
      ),
    [openModal, closeModal],
  );

  return <Button onClick={handlePress}>Open Modal</Button>;
}

```

--------------------------------

### Basic Modal Example using @coinbase/cds-web

Source: https://cds.coinbase.com/components/overlay/Modal

A basic example demonstrating how to implement a Modal component. It includes state management for visibility, a button to trigger opening the modal, and the structure for ModalHeader, ModalBody, and ModalFooter.

```javascript
function Example() {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal onRequestClose={() => setVisible(false)} visible={visible}>
        <ModalHeader
          backAccessibilityLabel="Back"
          closeAccessibilityLabel="Close"
          onBackButtonClick={() => setVisible(false)}
          testID="Basic Modal Test ID"
          title="Basic Modal"
        />
        <ModalBody tabIndex={0} testID="modal-body">
          Body contents go here
        </ModalBody>
        <ModalFooter
          primaryAction={<Button onClick={() => setVisible(false)}>Save</Button>}
          secondaryAction={
            <Button onClick={() => setVisible(false)} variant="secondary">
              Cancel
            </Button>
          }
        />
      </Modal>
    </>
  );
}

```

--------------------------------

### Basic BrowserBar Usage Example

Source: https://cds.coinbase.com/components/navigation/BrowserBar

Demonstrates the basic usage of the BrowserBar component, showing how to include start and end icons (like back arrow and more options) and a central navigation title.

```jsx
<BrowserBar  
  start={<NavBarIconButton name="backArrow" accessibilityLabel="Back" />}  
  end={<NavBarIconButton name="more" accessibilityLabel="More options" />}  
>
  <NavigationTitle>Coinbase</NavigationTitle>  
</BrowserBar>
```

--------------------------------

### Install CDS MCP Server with npm

Source: https://cds.coinbase.com/getting-started/mcp-server

Installs the CDS MCP Server as a standalone package and adds it as a dependency to your project using npm. This is for advanced installation scenarios.

```bash
npm install @coinbase/cds-mcp-server  

```

--------------------------------

### Import Default Font Styles

Source: https://cds.coinbase.com/getting-started/installation

Imports default font styles when using the CDS defaultTheme. This ensures consistent typography across the application.

```javascript
import '@coinbase/cds-web/defaultFontStyles';  
```

--------------------------------

### Basic useHasMounted Example

Source: https://cds.coinbase.com/hooks/useHasMounted

A simple example showing the basic usage of the useHasMounted hook. It renders different text based on whether the component has mounted or not.

```javascript
function Example() {
  const hasMounted = useHasMounted();

  return <TextHeadline>Component has {hasMounted ? 'mounted' : 'not mounted'}</TextHeadline>;
}
```

--------------------------------

### Install CDS MCP Server with npx

Source: https://cds.coinbase.com/getting-started/mcp-server

Installs the CDS MCP Server for Cursor or Claude Code and sets it up for use within your agent. This command ensures the server is ready for integration.

```bash
npx --package=@coinbase/cds-mcp-server cds-mcp-setup  

```

--------------------------------

### Create ContentCard Examples with React

Source: https://cds.coinbase.com/components/cards/ContentCard

This example showcases how to implement the ContentCard component using React. It includes examples of basic text-only cards and cards with media, demonstrating the use of ContentCardHeader, ContentCardBody, and associated elements like TextLabel2 and IconButton. The layout is managed using VStack and HStack for responsive design.

```jsx
function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375}>
      <ContentCard>
        <ContentCardHeader
          end={
            <IconButton
              transparent
              accessibilityLabel="More information about coinDesk card news"
              name="more"
              variant="secondary"
            />
          }
          meta={
            <Box marginLeft={-1}>
              <TextLabel2 as="span" color="fgMuted" marginLeft={-1} numberOfLines={1}>
                ・News・5 hrs
              </TextLabel2>
            </Box>
          }
          title="Description"
        />
        <ContentCardBody
          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </HStack>
          }
        />
      </ContentCard>
      <ContentCard>
        <ContentCardHeader
          meta={
            <Box marginLeft={-1}>
              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
                ・News・5 hrs
              </TextLabel2>
            </Box>
          }
          title="Brian Armstrong"
        />
        <ContentCardBody
          body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
          label={
            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
                BTC
              </TextLabel2>
              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                ↗ 5.12%
              </TextLabel2>
            </HStack>
          }
          media={
            <img
              alt=""
              aria-hidden="true"
              src="/img/card/content_card_basic.png"
              style={{
                objectFit: 'cover',
                cursor: 'pointer',
                borderRadius: '24px',
              }}
              width="100%"
            />
          }
          mediaPosition="right"
        />
      </ContentCard>
    </VStack>
  );
}

```

--------------------------------

### Basic AvatarButton Example

Source: https://cds.coinbase.com/components/inputs/AvatarButton

Demonstrates the basic usage of the AvatarButton component, rendering an avatar with a specified image source and an accessibility label. This is the foundational example for displaying an avatar.

```jsx
<AvatarButton
  src="https://avatars.slack-edge.com/2019-12-09/865473396980_e8c83b072b452e4d03f7_192.jpg"
  accessibilityLabel="Sneezy"
/>
```

--------------------------------

### ContentCardHeader Basic Example

Source: https://cds.coinbase.com/components/cards/ContentCardHeader

A basic implementation of the ContentCardHeader component, showcasing common props such as avatar, meta, title, and an end adornment. This example utilizes other `@coinbase/cds-web` components like VStack, Box, TextLabel2, and IconButton.

```javascript
function Example() {
  return (
    <VStack bordered borderRadius="400" maxWidth={375} padding={1}>
      <ContentCardHeader
        avatar="/img/card/content_card_custom_avatar_1.png"
        meta={
          <Box marginLeft={-1}>
            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
              ・News・5 hrs
            </TextLabel2>
          </Box>
        }
        title="Description"
        end={
          <IconButton
            transparent
            accessibilityLabel="More information about coinDesk card news"
            name="more"
            variant="secondary"
          />
        }
      />
    </VStack>
  );
}
```

--------------------------------

### Install CDS for Web Applications

Source: https://context7.com/context7/cds_coinbase/llms.txt

Installs the necessary packages for using CDS in a web application, including the core CDS web library and framer-motion for animations. Ensure framer-motion version is compatible.

```bash
npm install @coinbase/cds-web framer-motion@^10
```

--------------------------------

### Compact NudgeCard Example

Source: https://cds.coinbase.com/components/cards/NudgeCard

Illustrates the usage of the NudgeCard in a compact layout, ideal for scenarios with limited screen space. This example shows how to configure the NudgeCard for a more condensed presentation, using React.

```javascript
function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  const cards = [
    {
      title: 'Derivatives Trading',
      description: 'Derivative Exchange is available for all users',
      pictogram: 'derivativesNavigation',
      onActionPress: NoopFn,
      compact: true,
    },
  ];
  return (
    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
      {cards.map((card) => (
        <NudgeCard {...card} />
      ))}
    </HStack>
  );
}
```

--------------------------------

### Implement General Purpose UpsellCard Example

Source: https://cds.coinbase.com/components/cards/UpsellCard

This example shows how to implement a general-purpose UpsellCard. It includes a title, description, action button, and a pictogram for visual appeal. The `onActionPress` and `onDismissPress` props are handled by a placeholder function.

```javascript
function Example() {
  function NoopFn() {
    console.log('pressed');
  }
  return (
    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center">
      <UpsellCard
        title="Recurring Buy"
        description="Want to add funds to your card every week or month?"
        action={'Get started'}
        onActionPress={NoopFn}
        onDismissPress={NoopFn}
        media={
          <Box position="relative" right={24} bottom={6}>
            <Pictogram name="recurringPurchases" dimension="64x64" />
          </Box>
        }
      />
    </VStack>
  );
}
```

--------------------------------

### DotSymbol Component Examples: Placements

Source: https://cds.coinbase.com/components/other/DotSymbol

Demonstrates how to use the DotSymbol component with different pin prop values to position the dot relative to its child element. It shows examples with text and Icon children.

```javascript
function Placements() {
  const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
  return (
    <VStack gap={4}>
      {PIN_DIRECTIONS.map((pinDirection) => (
        <VStack gap={4} padding={1} key={`dotsymbol-placement-${pinDirection}`} paddingBottom={4}>
          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
            <VStack bordered padding={1}>
              Child
            </VStack>
          </DotSymbol>
          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
            <Icon name="airdrop" shape="square" size="l" />
          </DotSymbol>
        </VStack>
      ))}
    </ResponsiveExample>
  );
}
```

--------------------------------

### Real Modal Example with useOverlayContentContext

Source: https://cds.coinbase.com/hooks/useOverlayContentContext

Provides a practical example of using the `useOverlayContentContext` hook within a modal. It shows how the hook's output changes when the component is rendered inside versus outside a modal, demonstrating its ability to detect overlay contexts.

```javascript
function ModalExample() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const ExampleComponent = () => {
    const { isOverlay, isModal, isDrawer, isTour } = useOverlayContentContext();

    return (
      <VStack gap={2}>
        <TextHeadline>Overlay Context Information</TextHeadline>
        <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
        <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
        <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
        <Text>Is inside tour: {isTour ? 'Yes' : 'No'}</Text>
      </VStack>
    );
  };

  return (
    <VStack gap={3}>
      <VStack gap={2} padding={3} background="bgSecondary" borderRadius={400}>
        <TextHeadline>Outside Modal</TextHeadline>
        <ExampleComponent />
      </VStack>

      <Button onClick={() => setIsModalOpen(true)}>Open Modal to See Context Change</Button>

      <Modal visible={isModalOpen} onRequestClose={() => setIsModalOpen(false)}>
        <VStack gap={3} padding={4}>
          <TextHeadline>Modal with Context Hook</TextHeadline>
          <Text>
            This content is rendered inside a modal. Notice how the context values change:
          </Text>
          <VStack gap={2} padding={3} background="bgAlternate" borderRadius={400}>
            <ExampleComponent />
          </VStack>
          <Text color="fgMuted" font="caption">
            The hook automatically detects it's inside a modal context!
          </Text>
        </VStack>
      </Modal>
    </VStack>
  );
}
```

--------------------------------

### InputChip with Custom Start Element (Icon/Image)

Source: https://cds.coinbase.com/components/inputs/InputChip

Illustrates how to enhance InputChips by adding custom start elements, such as icons or images (like cryptocurrency logos). This example uses VStack and HStack for layout and specific components for icons and remote images.

```javascript
function Example() {
  return (
    <VStack gap={2}>
      <HStack gap={2}>
        <InputChip
          onClick={() => console.log('Remove Star')}
          value="With Icon"
          start={<Icon name="star" />} 
        />
      </HStack>
      <HStack gap={2}>
        <InputChip
          onClick={() => console.log('Remove BTC')}
          value="BTC"
          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />} 
        />
        <InputChip
          onClick={() => console.log('Remove ETH')}
          value="ETH"
          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />} 
        />
      </HStack>
    </VStack>
  );
}
```

--------------------------------

### Basic FullscreenModal Implementation Example

Source: https://cds.coinbase.com/components/overlay/FullscreenModal

This JavaScript example demonstrates how to implement and use the FullscreenModal component. It includes state management for visibility, refs for accessibility, and content composition for primary and secondary sections. It also shows how to handle modal open and close events and integrate with other CDS components like Button, Select, ListCell, Accordion, and PortalProvider.

```javascript
function DefaultModal() {
  const [visible, setVisible] = useState(false);
  const triggerRef = useRef(null);

  const toggleOn = useCallback(() => setVisible(true), []);
  const toggleOff = useCallback(() => setVisible(false), []);

  const handleClose = useCallback(() => {
    console.log('modal closing');
    toggleOff();
  }, [toggleOff]);

  const handleDidClose = useCallback(() => {
    if (triggerRef.current) {
      triggerRef.current.focus();
    }
  }, []);

  const onClickConsole = () => void console.log;

  const SelectComponent = () => {
    const [value, setValue] = useState();
    const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];

    return (
      <Select value={value} placeholder="Choose something..." onChange={setValue}>
        {options.map((option) => (
          <SelectOption value={option} key={option} title={option} description="Description" />
        ))}
      </Select>
    );
  };

  const primaryContent = (
    <VStack>
      <TextTitle1 as="h1">Fullscreen Modal</TextTitle1>
      <TextBody as="p">This is a test Fullscreen Modal with components composition.</TextBody>
      <ListCell
        title="Bitcoin"
        description="BTC"
        detail="$45,123"
        subdetail="+4.55%"
        variant="positive"
      />
      <SelectComponent />
      <HStack paddingY={3} gap={3}>
        <Button onClick={handleClose}>Yes</Button>
        <Button onClick={handleClose} variant="secondary">
          No
        </Button>
      </HStack>
    </VStack>
  );

  const secondaryContent = (
    <VStack borderRadius={300} elevation={1}>
      <Accordion defaultActiveKey="2">
        <AccordionItem itemKey="1" title="Accordion #1" subtitle="subtitle1">
          <TextBody as="p">{loremIpsum}</TextBody>
        </AccordionItem>
        <AccordionItem itemKey="2" title="Accordion #2" subtitle="subtitle2">
          <TextBody as="p">{loremIpsum}</TextBody>
        </AccordionItem>
      </Accordion>
    </VStack>
  );

  return (
    <PortalProvider>
      <Button onClick={toggleOn} ref={triggerRef}>
        Open Modal
      </Button>
      <FullscreenModal
        visible={visible}
        onRequestClose={handleClose}
        onDidClose={handleDidClose}
        primaryContent={primaryContent}
        secondaryContent={secondaryContent}
        title="Modal title"
        closeAccessibilityLabel="Close"
      />
    </PortalProvider>
  );
}

```

--------------------------------

### BrowserBar with Search Input Example

Source: https://cds.coinbase.com/components/navigation/BrowserBar

Illustrates how to integrate a search or URL input field within the BrowserBar. This example shows a lock icon on the start side and multiple icons with a horizontal stack on the end side, alongside a search input.

```jsx
<BrowserBar  
  start={<NavBarIconButton name="lock" accessibilityLabel="Secure" />}  
  end={
    <HStack>
      <NavBarIconButton name="share" accessibilityLabel="Share" />
      <NavBarIconButton name="bookmark" accessibilityLabel="Bookmark" />
    </HStack>
  }
>
  <BrowserBarSearchInput value="coinbase.com" />
</BrowserBar>
```

--------------------------------

### Basic PortalProvider Usage in React

Source: https://cds.coinbase.com/components/overlay/PortalProvider

Demonstrates the basic setup of PortalProvider at the root of a React application. This ensures that overlay components like modals and toasts are rendered correctly. It wraps the main application content.

```javascript
function Example() {
  return (
    <PortalProvider>
      <Box padding={4} bordered borderRadius={200}>
        Your app content
      </Box>
    </PortalProvider>
  );
}
```

--------------------------------

### MultiContentModule Example: Session Expired in React

Source: https://cds.coinbase.com/components/layout/MultiContentModule

Shows a practical implementation of the MultiContentModule to create a 'Session Expired' view. This example includes buttons for continuing or canceling, a user's email, and an avatar, guiding the user through the necessary actions after a session timeout.

```jsx
function Example() {
  const onClickConsole = () => console.log('onClick');
  const action = (
    <VStack paddingTop={2}>
      <ButtonGroup accessibilityLabel="Group" direction="vertical">
        <Button accessibilityLabel="Continue" onClick={onClickConsole}>
          Continue
        </Button>
        <Button accessibilityLabel="Cancel" onClick={onClickConsole} variant="secondary">
          Cancel
        </Button>
      </ButtonGroup>
    </VStack>
  );
  return (
    <HStack justifyContent="center">
      <MultiContentModule
        bordered
        action={action}
        title="Session Expired"
        description="Your session expired. Don't worry simply sign in again."
        accessibilityLabel="Session expired section"
        pictogram="waiting"
      >
        <Box bordered borderColor="bgLinePrimary" borderRadius={300}>
          <ListCell
            description="Satoshi Nakamoto"
            media={<Avatar alt="Sneezy" colorScheme="blue" name="Sneezy" />}
            title="satoshi@coinbase.com"
          />
        </Box>
      </MultiContentModule>
    </HStack>
  );
}
```

--------------------------------

### TextInput: Read-Only States

Source: https://cds.coinbase.com/components/inputs/TextInput

Demonstrates the read-only state of TextInput, which is visually distinct and focusable. Includes examples with and without suffixes or start content.

```jsx
<VStack gap={3}>
  <TextInput label="Read Only Input" readOnly value="This value cannot be edited" />
  <TextInput label="Read Only with Suffix" readOnly value="1234.56" suffix="USD" />
  <TextInput
    label="Read Only with Start Content"
    readOnly
    value="BTC Address"
    start={<InputIconButton name="search" />} 
  />
</VStack>
```

--------------------------------

### Basic Tour Example with Multiple Steps (React)

Source: https://cds.coinbase.com/components/navigation/Tour

This React code demonstrates a basic implementation of the Tour component, defining multiple steps with custom content, actions, and navigation. It utilizes `useState` for managing the active tour step and custom hooks like `useTourContext` for controlling tour flow. Dependencies include React hooks and various UI components from the @coinbase/cds-web library.

```jsx
function Example() {
  const [activeTourStep, setActiveTourStep] = useState(null);

  const StepOne = () => {
    const [checked, setChecked] = useState(false);

    const { goNextTourStep, stopTour } = useTourContext();

    return (
      <Coachmark
        action={
          <Button compact onClick={goNextTourStep}>
            Next
          </Button>
        }
        checkbox={
          <Checkbox checked={checked} onChange={setChecked}>
            Don&apos;t show again
          </Checkbox>
        }
        content="Add up to 3 lines of body copy. Deliver your message with clarity and impact"
        onClose={stopTour}
        title="My first step"
      />
    );
  };

  const StepTwo = () => {
    const { goNextTourStep, goPreviousTourStep, stopTour } = useTourContext();
    return (
      <Coachmark
        action={
          <HStack gap={1}>
            <Button compact onClick={goPreviousTourStep} variant="secondary">
              Back
            </Button>
            <Button compact onClick={goNextTourStep}>
              Next
            </Button>
          </HStack>
        }
        content={
          <VStack gap={2}>
            <TextCaption as="p" color="fgMuted">
              50%
            </TextCaption>
            <ProgressBar progress={0.5} />
            <TextBody as="p">
              Add up to 3 lines of body copy. Deliver your message with clarity and impact
            </TextBody>
          </VStack>
        }
        media={<RemoteImage height={150} source={ethBackground} width="100%" />}
        onClose={stopTour}
        title="My second step"
      />
    );
  };

  const StepThree = () => {
    const { stopTour, goNextTourStep, goPreviousTourStep } = useTourContext();
    return (
      <Coachmark
        action={
          <HStack gap={1}>
            <Button compact onClick={goPreviousTourStep} variant="secondary">
              Back
            </Button>
            <Button compact onClick={stopTour}>
              Done
            </Button>
          </HStack>
        }
        content="Add up to 3 lines of body copy. Deliver your message with clarity and impact"
        title="My third step"
        width={350}
      />
    );
  };

  const tourSteps = [
    {
      id: 'step1',
      onBeforeActive: () => console.log('step1 before'),
      Component: StepOne,
    },
    {
      id: 'step2',
      onBeforeActive: () => console.log('step2 before'),
      Component: StepTwo,
    },
    {
      id: 'step3',
      onBeforeActive: () => console.log('step3 before'),
      Component: StepThree,
    },
  ];

  const TourExample = ({ spacerWidthIncrement = 0, spacerHeightIncrement = 500 }) => {
    const { startTour } = useTourContext();

    const handleClick = useCallback(() => startTour(), [startTour]);

    return (
      <VStack flexGrow={1} gap={2} justifyContent="space-between">
        <Button compact onClick={handleClick}>
          Start tour
        </Button>
        <TourStep id="step1">
          <Box background="bgAlternate" padding={4}>
            <TextBody as="p">This is step 1</TextBody>
          </Box>
        </TourStep>
        <Box height={spacerHeightIncrement} />
        <HStack justifyContent="flex-end">
          <Box flexShrink={0} width={spacerWidthIncrement} />
          <TourStep id="step2">
            <Box background="bgAlternate" padding={4} width={150}>
              <TextBody as="p">This is step 2</TextBody>
            </Box>
          </TourStep>
        </HStack>
        <Box height={spacerHeightIncrement} />
        <HStack>
          <Box flexShrink={0} width={spacerWidthIncrement * 2} />
          <TourStep id="step3">
            <VStack background="bgAlternate" padding={4} width={150}>
              <TextBody as="p">This is step 3</TextBody>
            </VStack>
          </TourStep>
        </HStack>
      </VStack>
    );
  };

  return (
    <Tour activeTourStep={activeTourStep} onChange={setActiveTourStep} steps={tourSteps}>
      <TourExample />
    </Tour>
  );
}
```

--------------------------------

### Select with Label and Helper Text

Source: https://cds.coinbase.com/components/inputs/Select

Demonstrates how to add a label and helper text to the Select component, improving accessibility and user guidance. This example also includes a start node.

```javascript
function LabelHelperTextSelect() {
  const [value, setValue] = useState('Option 2');
  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
  return (
    <VStack padding={2}>
      <Select
        label="Make a selection"
        helperText="You can only choose one"
        value={value}
        onChange={setValue}
        startNode={<InputIcon name="calendar" />}>
        {options.map((option) => (
          <SelectOption value={option} key={option} title={option} description="Description" />
        ))}
      </Select>
    </VStack>
  );
}

```

--------------------------------

### Basic SpotRectangle Usage

Source: https://cds.coinbase.com/components/media/SpotRectangle

A basic example demonstrating how to render the SpotRectangle component with a specified illustration name. This is the simplest way to integrate the component into your UI.

```jsx
<SpotRectangle name="creditCardExcitement" />
```

--------------------------------

### Set up CDS Web Application Entry Point

Source: https://context7.com/context7/cds_coinbase/llms.txt

Imports essential styles and theme providers for a React web application using CDS. This setup ensures global styles, fonts, and theming are correctly applied at the application's root.

```javascript
// Import required styles at application entry point
import '@coinbase/cds-icons/fonts/web/icon-font.css';
import '@coinbase/cds-web/globalStyles';
import '@coinbase/cds-web/defaultFontStyles';

import { createRoot } from 'react-dom/client';
import { ThemeProvider, MediaQueryProvider } from '@coinbase/cds-web/system';
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
  <MediaQueryProvider>
    <ThemeProvider theme={defaultTheme} activeColorScheme="light">
      <App />
    </ThemeProvider>
  </MediaQueryProvider>
);
```

--------------------------------

### Initialize CDS with Extended Style Props (CSS)

Source: https://cds.coinbase.com/getting-started/theming

This JavaScript code shows how to initialize the CDS configuration with custom style props, specifically for the `Color` theme variable. It defines responsive classnames for `background`, `color`, and `borderColor` that map to CSS variables, ensuring proper theming across different screen sizes.

```javascript
import { initializeCDS } from '@coinbase/cds-web/styles/config';

initializeCDS({
  extendStyleProps: {
    // Specify the ThemeVars interface name that you extended
    Color: {
      // Specify the new theme variable name that you added
      myCustomColor: {
        // Configure the necessary static classNames for the new theme variable
        background: {
          base: 'background-myCustomColor',
          phone: 'background-myCustomColor-phone',
          tablet: 'background-myCustomColor-tablet',
          desktop: 'background-myCustomColor-desktop',
        },
        color: {
          base: 'color-myCustomColor',
          phone: 'color-myCustomColor-phone',
          tablet: 'color-myCustomColor-tablet',
          desktop: 'color-myCustomColor-desktop',
        },
        borderColor: {
          base: 'borderColor-myCustomColor',
          phone: 'borderColor-myCustomColor-phone',
          tablet: 'borderColor-myCustomColor-tablet',
          desktop: 'borderColor-myCustomColor-desktop',
        },
      },
    },
  },
});

```

--------------------------------

### Initialize ThemeProvider with Theme and Color Scheme

Source: https://cds.coinbase.com/components/other/ThemeProvider

Demonstrates how to configure the ThemeProvider by passing the theme object and specifying the active color scheme (light or dark). This sets up the theme context for child components.

```javascript
import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';

const App = () => (
  <ThemeProvider theme={defaultTheme} activeColorScheme="light">
    {/* Your app components */}
  </ThemeProvider>
);
```

--------------------------------

### Customize PageHeader with Styles

Source: https://cds.coinbase.com/components/navigation/PageHeader

Illustrates how to customize the PageHeader component using the `styles` prop to adjust spacing and alignment. This example shows how to apply custom padding to the start and end elements for better integration with page content.

```javascript
function Example() {
  return (
    <>
      <PageHeader
        styles={{
          start: {
            paddingLeft: 'var(--space-1_5)',
          },
          end: {
            paddingRight: 'var(--space-1_5)',
          },
        }}
        background="bgPrimaryWash"
        end={
          <HStack alignItems="center" gap={2}>
            <Link href="/components/typography/link" font="headline" color="fgPrimary">
              Help
            </Link>
            <HStack gap={1}>
              <IconButton
                transparent
                accessibilityLabel="Share"
                name="externalLink"
                onClick={() => console.log('Share clicked')}
                testID="header-external-link-button"
              />
              <IconButton
                transparent
                accessibilityLabel="Close"
                name="close"
                onClick={() => console.log('Close clicked')}
                testID="header-close-button"
              />
            </HStack>
          </HStack>
        }
        start={
          <IconButton
            transparent
            accessibilityLabel="Back"
            name="backArrow"
            onClick={() => console.log('Back clicked')}
            testID="header-back-button"
          />
        }
        title="Trading Settings"
      />
      <Box padding={3} background="bgPositiveWash">
        <VStack gap={3} background="bgPrimaryWash">
          <TextTitle2>Configure Your Trading Preferences</TextTitle2>
          <TextBody>
            Customize your trading experience by adjusting the settings below. These preferences
            will apply to all your trading activities and can be modified at any time.
          </TextBody>
          <TextTitle4>Order Types</TextTitle4>
          <TextBody color="fgSecondary">
            Choose your preferred default order types for buying and selling. Market orders execute
            immediately at current prices, while limit orders allow you to set specific price
            targets.
          </TextBody>
        </VStack>
      </Box>
    </>
  );
}
```

--------------------------------

### Basic PageFooter Usage Example

Source: https://cds.coinbase.com/components/navigation/PageFooter

Demonstrates the fundamental implementation of the PageFooter component. It includes a primary action button, showing how to pass the 'action' prop to render content within the footer.

```jsx
function BasicPageFooter() {
  return (
    <PageFooter
      action={
        <Button variant="primary" onClick={() => console.log('Clicked')}> 
          Submit
        </Button>
      }
    />
  );
}
```

--------------------------------

### Access Theme and Color Scheme with useTheme Hook

Source: https://cds.coinbase.com/hooks/useTheme

This example shows how to call the useTheme hook to get the current theme object. It then accesses properties like `activeColorScheme`, `spectrum`, `color`, `space`, `borderRadius`, and `fontSize` to retrieve specific design tokens.

```javascript
const theme = useTheme();

theme.activeColorScheme; // "light" or "dark"  
theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme  
theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme  
theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme  
theme.space[2]; // 16  
theme.borderRadius[200]; // 8  
theme.fontSize.display3; // "2.5rem"  

```

--------------------------------

### Example: Logged-in Navigation Bar with Tabs and Search - JavaScript

Source: https://cds.coinbase.com/components/navigation/NavigationBar

This example demonstrates a complete NavigationBar implementation for a logged-in state. It includes a back button, action icons (globe, bell), tab navigation, and a search input. It utilizes various CDS components like IconButton, HStack, VStack, SearchInput, and TabNavigation.

```javascript
function NavigationWithPress() {
  const tabs = [
    {
      id: 'all',
      label: 'All',
    },
    {
      id: 'watchlist',
      label: 'Watchlist',
    },
    {
      id: 'tradable',
      label: 'Tradable',
    },
    {
      id: 'gainers',
      label: 'Gainers',
      count: 2,
    },
    {
      id: 'losers',
      label: 'Losers',
    },
    {
      id: 'trending',
      label: 'Trending',
    },
    {
      id: 'other',
      label: 'Other',
    },
  ];
  const [search, setSearch] = useState('');
  const [value, setValue] = useState(tabs[1].id);
  const showBackButton = useMemo(() => value !== tabs[0].id, [value]);
  const handleBackPress = useCallback(() => {
    setValue(tabs[0].id);
  }, []);
  return (
    <NavigationBar
      start={
        showBackButton && (
          <IconButton name="backArrow" onClick={handleBackPress} accessibilityLabel="Back" />
        )
      }
      end={
        <HStack gap={1} alignItems="center">
          <IconButton accessibilityLabel="Language" active={false} name="globe" />
          <IconButton accessibilityLabel="Notifications" active name="bell" />
        </HStack>
      }
      bottom={<TabNavigation tabs={tabs} value={value} onChange={setValue} />}
    >
      <HStack alignItems="center" flexGrow={1} gap={1}>
        <VStack width="100%">
          <SearchInput
            compact
            accessibilityLabel="Search"
            onChangeText={setSearch}
            placeholder="Search"
            value={search}
          />
        </VStack>
      </HStack>
    </NavigationBar>
  );
}
```

--------------------------------

### Combining Styling Techniques in CDS Components

Source: https://cds.coinbase.com/getting-started/styling

Illustrates the flexibility of CDS by showing how to combine different styling methods. This example merges a component-specific `variant` prop with a theme-based `borderColor` and an inline `style` prop for font family on a Button component.

```jsx
<Button variant="primary" borderColor="accentBoldPurple" style={{ fontFamily: 'Times' }}>  
  Click me  
</Button>  
```

--------------------------------

### Basic FullscreenAlert Example

Source: https://cds.coinbase.com/components/overlay/FullscreenAlert

Demonstrates the basic usage of the FullscreenAlert component. It includes setting the visibility state, handling open and close actions, and configuring various alert properties like title, body, hero image, and action buttons. Requires React and PortalProvider.

```jsx
function DefaultAlert() {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => setVisible(true);
  const handleClose = () => setVisible(false);

  return (
    <PortalProvider>
      <Button onClick={handleOpen}>Open Alert</Button>
      <FullscreenAlert
        visible={visible}
        onRequestClose={handleClose}
        title="Connection trouble"
        body="We're unable to connect to our card partner. Apologies for the inconvenience. Please try again later today or tomorrow."
        heroSquare="errorApp500"
        preferredActionLabel="Try again"
        onPreferredActionPress={handleClose}
        dismissActionLabel="Cancel"
        onDismissActionPress={handleClose}
        closeAccessibilityLabel="Close"
      />
    </PortalProvider>
  );
}
```

--------------------------------

### TabLabel Component Examples (JSX)

Source: https://cds.coinbase.com/components/navigation/TabLabel

Provides examples of how to use the TabLabel component with different props, including primary and secondary variants, and a count indicator. These examples showcase the component's flexibility in various UI contexts within tab navigation.

```jsx
<VStack gap={2}>
  <HStack gap={2}>
    <TabLabel>Primary tab</TabLabel>
    <TabLabel count={1}>Primary tab</TabLabel>
    <TabLabel count={10}>Primary tab</TabLabel>
    <TabLabel count={100}>Primary tab</TabLabel>
  </HStack>
  <HStack gap={2}>
    <TabLabel variant="secondary">Secondary tab</TabLabel>
    <TabLabel variant="secondary" count={1}>
      Secondary tab
    </TabLabel>
    <TabLabel variant="secondary" count={10}>
      Secondary tab
    </TabLabel>
    <TabLabel variant="secondary" count={100}>
      Secondary tab
    </TabLabel>
  </HStack>
</VStack>
```