@coinbase/cds-mcp-server 8.17.2 → 8.17.4

package/mcp-docs/web/getting-started/installation.txt

@@ -0,0 +1,103 @@
+# installation
+
+This guide will help you get started with installing CDS in your React project. Follow the instructions below to set up CDS and start building with our cross-platform components.
+
+### Installation
+
+To install the CDS library for React web applications, run the following command:
+
+```bash
+npm install @coinbase/cds-web framer-motion@^10
+```
+
+Alternatively, if you are using Yarn:
+
+```bash
+yarn add @coinbase/cds-web framer-motion@^10
+```
+
+### Getting started
+#### 1. Import global styles
+
+Some global and icon styles are required for components to render correctly. Import these styles near your application entry point.
+
+```tsx
+import '@coinbase/cds-icons/fonts/web/icon-font.css';
+import '@coinbase/cds-web/globalStyles';
+```
+
+[See the `globalStyles` source code here →](https://github.com/coinbase/cds/blob/master/packages/web/src/styles/global.ts)
+
+If you are using the CDS `defaultTheme` you should also import the default font styles.
+
+```tsx
+import '@coinbase/cds-web/defaultFontStyles';
+```
+
+#### 2. Render a ThemeProvider and MediaQueryProvider
+
+Render a ThemeProvider at the root of your application, and pass the `theme` and `activeColorScheme`.
+
+Render a MediaQueryProvider for components that use the `useMediaQuery` hook.
+
+```tsx
+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;
+```
+
+:::tip
+The MediaQueryProvider prevents issues with `window.matchMedia()` in SSR environments.
+[Read more here &rarr;](/components/other/MediaQueryProvider#server-side-rendering)
+:::
+
+#### 3. Verify the installation
+
+Try importing and rendering a simple CDS component.
+
+```tsx
+import { Button } from '@coinbase/cds-web/buttons';
+
+const Test = () => <Button>Click Me</Button>;
+```
+
+### Example implementation
+
+Here's an example React DOM app using the `defaultTheme`.
+
+```tsx
+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>,
+);
+```
+
+### Next steps
+
+Learn how to customize CDS's appearance.
+
+[See the theming docs here &rarr;](/getting-started/theming)
+

package/mcp-docs/web/getting-started/introduction.txt

@@ -0,0 +1,102 @@
+---
+id: introduction
+title: Introduction
+hide_title: true
+---
+
+import { VStack } from '@coinbase/cds-web/layout';
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { GettingStartedBanner } from '@site/src/components/page/ComponentBanner/GettingStartedBanner';
+
+<VStack gap={5}>
+<ContentHeader
+  title="Introduction"
+  description="Coinbase Design System is a cross-platform component library for React and React Native. CDS has high adoption in every product at Coinbase, accelerating development and ensuring a consistent user experience across all platforms."
+  banner={<GettingStartedBanner />}
+/>
+
+<MDXSection>
+<MDXArticle>
+## Key features
+
+- **Cross-platform** - CDS provides components for both React DOM and React Native. We go to great lengths to ensure that the source code is as identical as possible across React and React Native without compromising on platform-specific features.
+
+- **Powerful theming** - The ThemeProvider can be used to define a custom theme for your application supporting light and dark mode.
+
+- **Rich styling capabilities** - Components are designed to integrate with third-party libraries like styled-components, and to be customizable via theming, props, StyleProps, classnames, and inline styles.
+
+- **Subcomponent composition** - Components are built using smaller subcomponents that can be fully customized or replaced via props.
+
+- **Accessibility** - Components are accessible out of the box, and can be customized to different accessibility standards.
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Web-only features
+
+- **Atomic static CSS** - CSS is compiled to atomic static classnames at library build time.
+
+- **Responsive styles** - Components support responsive styles out of the box. Use the responsive syntax to adjust layouts and styles based on device breakpoints without writing custom media queries.
+
+- **CSS layers** - All CSS is added to the `cds` layer. This allows you to easily override CDS styles with your own styles.
+
+- **Polymorphic components** - Components can be rendered as different HTML elements or as other components.
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Developer experience
+
+CDS is designed to make your development workflow as smooth as possible.
+
+- **TypeScript first** - Full type safety with excellent IDE autocomplete for props, theme values, and style props. Most mistakes are caught at compile time.
+
+- **Flexible styling** - Use the StyleProps API for rapid development with theme-aware values, or drop down to className and style props for full control. Mix and match approaches as needed.
+
+- **Component composition** - Build complex UIs by composing simple primitives. Most components expose subcomponents that can be customized or replaced entirely.
+
+- **Performance optimized** - All web components use atomic CSS with zero runtime overhead. CSS is generated at build time and styles are applied via static classnames.
+
+- **Extensive documentation** - Every component includes Storybook stories, interactive examples, detailed prop tables, and usage guidelines.
+
+```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>
+);
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Next steps
+
+Learn how to install and use CDS.
+
+[See the installation docs here →](/getting-started/installation)
+
+</MDXArticle>
+</MDXSection>
+</VStack>

package/mcp-docs/web/getting-started/playground.txt

@@ -0,0 +1,28 @@
+---
+id: playground
+title: Playground
+hide_title: true
+---
+
+import { VStack } from '@coinbase/cds-web/layout';
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { PlaygroundBanner } from '@site/src/components/page/ComponentBanner/PlaygroundBanner';
+import { ShareablePlayground } from '@site/src/components/page/ShareablePlayground';
+
+<VStack gap={5}>
+<ContentHeader
+  title="Playground"
+  description="Live code playground for testing and sharing CDS components and code examples. All CDS components and hooks and all React exports are available to use in the playground without importing them. You must call render() to render your code."
+  banner={<PlaygroundBanner />}
+/>
+
+<MDXSection>
+<MDXArticle>
+
+<ShareablePlayground />
+
+</MDXArticle>
+</MDXSection>
+</VStack>

package/mcp-docs/web/getting-started/styling.txt

@@ -0,0 +1,161 @@
+# styling
+
+CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
+
+import { media } from '@coinbase/cds-web/styles/media';
+### `StyleProps` API
+
+Most components support the StyleProps API. StyleProps automatically have access to the values in the theme, and some StyleProps are limited to only the theme values.
+
+[See the full list of StyleProps here →](/components/layout/Box/?platform=web&tab=props)
+
+```jsx
+// ✅ The `bgNegative` token will automatically update with the theme!
+<Box background="bgNegative" width={100} />
+
+// ❌ Error: Type '"#0000ff"' is not assignable to type 'Color | undefined'.
+<Box background="#0000ff" width={100} />
+```
+
+:::tip
+The docs page of every component has a props table listing all the available props!
+:::
+
+:::note
+The StyleProps API applies static atomic classnames under the hood. These classnames reference CSS Variables set by the ThemeProvider to enable dynamic theming.
+:::
+
+#### Responsive styles
+
+On web, all StyleProps support an optional responsive syntax for device-specific styles.
+
+```jsx
+<Box
+  width={{ base: 200, tablet: 200, desktop: 400 }}
+  background={{ base: 'bgPrimary', phone: 'bgSecondary' }}
+/>
+```
+
+- **base:** no media query
+- **phone:** <code>{media.phone}</code>
+- **tablet:** <code>{media.tablet}</code>
+- **desktop:** <code>{media.desktop}</code>
+
+It is not possible to customize the breakpoint values unless you compile CDS from the source code.
+
+Import the `media` object to use CDS breakpoints and media queries in your own custom styles.
+
+[See how breakpoints are defined in the `media` object &rarr;](https://github.com/coinbase/cds/blob/master/packages/web/src/styles/media.ts)
+
+```jsx
+import styled from 'styled-components';
+import { media } from '@coinbase/cds-web/styles/media';
+
+const MyCustomThing = styled.div`
+  ${media.phone} {
+    width: 100px;
+  }
+`;
+```
+
+### `style` and `styles` props
+
+Most components support the native `style` prop for inline styles.
+
+```jsx
+<Box style={{ backgroundColor: '#0000ff' }} />
+```
+
+Some complex components support passing inline styles to subcomponents with the `styles` prop.
+
+```jsx
+<ProgressCircle
+  styles={{
+    circle: {
+      stroke: 'transparent',
+    },
+    progress: {
+      strokeLinecap: 'square',
+    },
+  }}
+  color="fgPositive"
+  progress={0.75}
+  size={100}
+/>
+```
+
+Styles are merged together as objects in order of specificity.
+
+```jsx
+<PageHeader style={{ backgroundColor: 'red' }} styles={{ root: { backgroundColor: 'blue' } }} />
+```
+
+In the example above, `backgroundColor` will be blue.
+
+:::tip
+We will continue to add the `styles` prop to more components over time. Please feel free to request specific components that you think would benefit from this API.
+:::
+
+### `className` and `classNames` props
+
+Most components support the native `className` prop for inline styles.
+
+```jsx
+<Box className="my-custom-box" />
+```
+
+Some complex components support passing classnames to subcomponents with the `classNames` prop.
+
+```jsx
+<ProgressCircle
+  classNames={{
+    circle: 'my-custom-circle',
+    progress: 'my-custom-progress',
+  }}
+  color="fgPositive"
+  progress={0.75}
+  size={100}
+/>
+```
+
+:::tip
+We will continue to add the `classNames` prop to more components over time. Please feel free to request specific components that you think would benefit from this API.
+:::
+
+### Component specific props
+
+Many components have their own specific props that can affect styling.
+
+```jsx
+<Button compact variant="primary">
+  Click me
+</Button>
+```
+
+### Combining techniques
+
+Mix and match these styling techniques for complete customization!
+
+```jsx
+<Button variant="primary" borderColor="accentBoldPurple" style={{ fontFamily: 'Times' }}>
+  Click me
+</Button>
+```
+
+### Global CSS reset
+
+CDS web global styles include a CSS reset which override the browser default styles for some elements. This ensures that polymorphic components render correctly, regardless of their HTML element.
+
+[See the global CSS reset here &rarr;](https://github.com/coinbase/cds/blob/master/packages/web/src/styles/global.ts)
+
+### Polymorphic components
+
+Many CDS web components have the polymorphic `as` prop, which allows you to change what component or element is being rendered under the hood.
+
+Using the polymorphic `as` prop will change the component's type to allow the relevant native props.
+
+```jsx
+<Button as="a" href="google.com" />
+<Link as="button" type="submit" />
+```
+

package/mcp-docs/web/getting-started/templates.txt

@@ -0,0 +1,121 @@
+# templates
+
+Get started quickly with pre-built templates for common app architectures. Choose from Next.js, Vite, or Webpack templates, all configured with CDS components and best practices.
+
+import { TemplateCard } from '@site/src/components/page/TemplateCard';
+import { HStack } from '@coinbase/cds-web/layout';
+import ThemedImage from '@theme/ThemedImage';
+
+### Get started
+
+The easiest way to get started with CDS is with a template. All templates include the required CDS packages, dependencies, and pre-configured settings. Each template provides a working example application with common UI patterns to help you start building.
+
+<HStack gap={2} style={{ marginTop: '1.5rem', flexWrap: 'wrap', alignItems: 'stretch' }}>
+  <TemplateCard
+    description="Built for web applications with SSR and full-stack capabilities"
+    href="https://github.com/coinbase/cds/tree/master/templates/next-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/nextjs_light.png',
+          dark: '/img/logos/frameworks/nextjs_dark.png',
+        }}
+        alt="Next.js"
+        style={{ paddingTop: 'var(--space-1_5)', paddingBottom: 'var(--space-1_5)' }}
+        height="100%"
+      />
+    }
+  />
+  <TemplateCard
+    name="Vite"
+    description="Built for fast, modern single page applications"
+    href="https://github.com/coinbase/cds/tree/master/templates/vite-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/vite.png',
+          dark: '/img/logos/frameworks/vite.png',
+        }}
+        alt=""
+        style={{ paddingTop: 'var(--space-0_5)', paddingBottom: 'var(--space-0_5)' }}
+        height="100%"
+      />
+    }
+  />
+  <TemplateCard
+    description="Built for customizable build setups"
+    href="https://github.com/coinbase/cds/tree/master/templates/webpack-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/webpack_light.png',
+          dark: '/img/logos/frameworks/webpack_dark.png',
+        }}
+        alt="Webpack"
+        height="100%"
+      />
+    }
+  />
+</HStack>
+
+### Installation
+
+To create a new project from a template, use `gitpick` to bootstrap your application:
+
+#### Next.js
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/next-app cds-next
+cd cds-next
+```
+
+#### Vite
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/vite-app cds-vite
+cd cds-vite
+```
+
+#### Webpack
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/webpack-app cds-webpack
+cd cds-webpack
+```
+
+### Setup
+
+After creating your project, install dependencies and start developing:
+
+```bash
+## We suggest using nvm to manage Node.js versions
+nvm install
+nvm use
+
+## Enable corepack for package manager setup
+corepack enable
+
+## Install dependencies
+yarn
+
+## Start development server
+yarn dev
+```
+
+### What's included
+
+All templates come pre-configured with:
+
+- Latest CDS packages (`@coinbase/cds-web`, `@coinbase/cds-icons`, etc.)
+- TypeScript configuration
+- Example components demonstrating common UI patterns
+- Theme setup with CDS default theme
+- Responsive layouts using CDS layout components
+
+### Next steps
+
+After setting up your template, learn how to customize and extend CDS:
+
+- [Theming](/getting-started/theming) - Customize colors, spacing, and typography
+- [Installation](/getting-started/installation) - Manual installation and setup options
+