This repository serves as a reference for integrating Puck and Puck AI with component libraries.

You can use it to:

• Get ready-to-use Puck component configs for your project
• Understand how to integrate your own components
• Bootstrap a new project from scratch

We currently have references for the following component libraries:

• shadcn
• React Email

1. Install the component library you want in your project.

2. Clone the repository:

   git clone {link}

3. Copy or move any folders/files you need into your project.

Each component library has its own subfolder. Inside, you'll find a basic app bootstrapped with our Next.js recipe.

All Puck component integration-related code lives under the ./puck directory.

• Main Puck config: ./puck/index.tsx
• Component configs: ./puck/config/components
• Root config: ./puck/config/root/index.tsx
• Reusable field configs: ./puck/config/fields

• Shared components (e.g., heading, link, button): ./puck/components
• Shared constants (e.g., theme palette, numbers): ./puck/constants
• Shared helpers (e.g., getItemSummary, add): ./puck/lib

For detailed steps on how to reuse the Puck config, component configs, or other parts of the codebase, check out the subfolders for each component library:

• shadcn
• React Email