API OverviewCDS provides a robust set of APIs to streamline development and create consistent, accessible, and high-performance applications. This page provides an overview of the key APIs and concepts in CDS to help you get started.

Core Concepts

Components

CDS offers a comprehensive library of React and React Native components. These components are designed to:

• Be customizable via props and theming.
• Render quickly with no runtime style injection.
• Adhere to strict accessibility standards.

Theming

Theming is at the core of CDS. The ThemeProvider broadcasts a theme throughout your application, enabling:

• Global style consistency.
• Customization of colors, spacing, typography, and more.
• Light and dark mode support.
• Injection of CSS variables for web.

---

StyleProps

CDS components support a powerful StyleProps API that simplifies applying styles. This API:

• Is connected to the ThemeProvider.
• Reduces the need for custom CSS or inline styles.
• Supports responsive design out of the box on web.
• Minimizes CSS output with atomic CSS.

Example:

<Box
  color="fgMuted"
  background="bgAlternate"
  padding={{ base: 2, tablet: 4, desktop: 6 }}
  width={{ base: '100%', desktop: '50%' }}
/>

Polymorphic Components on web

Many CDS web components are polymorphic, meaning they can render different HTML elements based on the as prop. This flexibility allows developers to tailor components to specific use cases while maintaining consistent styles and behavior.

Example:

<Button as="a" href="https://coinbase.com">
  Go to Coinbase
</Button>

---

Responsive Design on web

CDS supports responsive design with a declarative syntax. You can specify different styles for various breakpoints directly in your components without writing media queries manually.

Example:

<Grid gap={{ base: 2, desktop: 4 }} templateColumns={{ base: '1fr', tablet: 'repeat(2, 1fr)' }}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Grid>

---

Common Props

Most CDS components support the StyleProps API, the style prop for inline styles, and the className prop for class styles.

Component-Specific Props

Each component has its own set of specific props. Refer to the individual component documentation for detailed information about its API.

Example:

<Button variant="secondary">Hello world</Button>

---

Dynamic Styling with Theme Variables

CDS exposes theme variables that allow you to create custom styles based on the current theme. These variables include:

• Colors (color.fgPrimary, color.bgPrimary, etc.)
• Spacing (space[0], space[1], etc.)
• Typography (fontSize.body, lineHeight.body, etc.)
• And more.

Both React Native and web provide access through the theme context:

import { useTheme } from '@coinbase/cds-web';

const MyComponent = () => {
  const theme = useTheme();
  return <View style={{ backgroundColor: theme.color.bgPrimary }}>Hello world</View>;
};

Prefer to use CSS Variables directly on web for better performance:

.my-class {
  background-color: var(--color-bgPrimary);
}

---

Accessibility API

CDS components are designed with accessibility in mind. Key features include:

• ARIA attributes to support screen readers.
• Focus management for interactive components (e.g., Modal, Dropdown).
• Keyboard navigation support.

Developers can further enhance accessibility by:

• Providing descriptive labels (e.g., aria-label, aria-labelledby).
• Testing with accessibility tools.

Example:

<Button aria-label="Submit form">Submit</Button>

---

Integration with Third-Party Libraries

CDS components integrate seamlessly with third-party libraries, such as:

• Panda CSS: Create type-safe CSS at build time.
• Styled Components: Wrap CDS components with custom styles.
• React Router: Use NavLink and Link for navigation.

---

Next Steps

• Component Library: Explore all the components available in CDS.
• Theming: Learn how to customize your application's theme.
• StyleProps Guide Dive deeper into the powerful StyleProps API.

Unlock the full potential of the Coinbase Design System and start building high-quality applications today!