primer-web-components
NewBuild checkout and payment experiences using Primer's web components. Covers React integration, SSR support, event handling, and CSS theming.
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
# Install dependencies
yarn install
# Start documentation site
yarn devRun 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:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-update) - Commit your changes (
git commit -m 'Add amazing update') - Push to the branch (
git push origin feature/amazing-update) - Open a Pull Request
Development Guidelines
- •Follow the existing code style
- •Update documentation for changes
Project Structure
.
├── docs/ # Documentation site
├── examples/ # Integration examples
│ ├── react/
│ ├── vue/
│ └── ...
└── packages/ # Shared utilities
└── common/Reporting Issues
- •For documentation issues, use the Documentation Issue Template
- •For example code issues, use the Example Issue Template
Support
Install & Usage
mkdir -p .claude/skillsmkdir -p .claude/skills && curl -o .claude/skills/primer-web-components.md https://raw.githubusercontent.com/primer-io/examples/main/SKILL.md/primer-web-componentsFrequently 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.