TemplatesGet 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.

---

󰏖

View as Markdown

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.

󰏖

Built for web applications with SSR and full-stack capabilities

Vite

󰏖

Built for fast, modern single page applications

󰏖

Built for customizable build setups

---

Installation

To create a new project from a template, use gitpick to bootstrap your application:

Next.js

npx -y gitpick coinbase/cds/tree/master/templates/next-app cds-next
cd cds-next

Vite

npx -y gitpick coinbase/cds/tree/master/templates/vite-app cds-vite
cd cds-vite

Webpack

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:

# 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 - Customize colors, spacing, and typography
• Installation - Manual installation and setup options

---