BeClaude

primer-web-components

New
Community RegistryGeneralby Primer

Build checkout and payment experiences using Primer's web components. Covers React integration, SSR support, event handling, and CSS theming.

Community PluginView Source

Overview

This repository hosts the public documentation and integration examples for Primer's Beta Primer Components.

Overview

  • /docs - Official documentation for Beta SDK Components
  • /examples - Integration examples for Beta Primer Components
  • /packages - Shared utilities and components

Quick Start

Documentation

bash
# Install dependencies
yarn install

# Start documentation site
yarn dev

Run examples

  • navigate to /examples/ folder and
  • choose an example to run
  • follow the README instructions

Documentation

Our documentation is built with Docusaurus and can be found in the /docs directory. Key sections include:

  • Getting Started
  • Component API Reference
  • Integration Guides
  • Customization & Theming
  • Migration Guides

Examples

The /examples directory contains working implementations using Beta Primer Components:

  • Basic Checkout Flow
  • Custom Layout Examples
  • Framework-Specific Integrations (React, Vue, Angular)
  • Advanced Customization Examples

Each example includes:

  • Source code
  • README with setup instructions
  • Live demo link (where applicable)

Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-update)
  3. Commit your changes (git commit -m 'Add amazing update')
  4. Push to the branch (git push origin feature/amazing-update)
  5. Open a Pull Request

Development Guidelines

  • Follow the existing code style
  • Update documentation for changes

Project Structure

code
.
├── docs/                 # Documentation site
├── examples/            # Integration examples
│   ├── react/
│   ├── vue/
│   └── ...
└── packages/           # Shared utilities
    └── common/

Reporting Issues

Support

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/primer-web-components.md https://raw.githubusercontent.com/primer-io/examples/main/SKILL.md
3
Invoke in Claude Code
/primer-web-components
View source on GitHub

Frequently Asked Questions

What is primer-web-components?

Build checkout and payment experiences using Primer's web components. Covers React integration, SSR support, event handling, and CSS theming.

How to install primer-web-components?

To install primer-web-components, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /primer-web-components.

What is primer-web-components best for?

primer-web-components is a community categorized under General. Created by Primer.