Skip to main content
Everything on this page is guidance, not a checklist. We work with you during onboarding and adapt to how your team already ships components. For example, we have connected teams using the public NPM registry, private NPM, and GitHub Packages (an npm-compatible registry with a read-only token and .npmrc scoped to your organization).

​
Providing component code

We need your component source so we can render it in Magic Patterns and so generated prototypes use import paths that match your engineering handoff. NPM, GitHub Packages, and other private registries are ways to host and version the same package artifact; a zip, tar, or npm pack tarball you send manually works the same role. Documentation for the AI (when to use which component) is separate and often comes from Storybook or a custom MCP.

​
Requirements

React Components

Your code must be written in React.

​
Package structure

We recommend keeping Storybook files next to your component sources so documentation stays close to the code and is easier for the AI to relate to usage. 
my-design-system/
├── package.json
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx    # Storybook file
│   │   │   └── index.ts
│   │   ├── Card/
│   │   │   ├── Card.tsx
│   │   │   ├── Card.stories.tsx
│   │   │   └── index.ts
│   │   └── index.ts                  # Re-exports all components
│   └── index.ts                      # Main entry point
└── dist/                             # Compiled output

​
Ways to share

You can provide component code in either of these ways:
If your package is on a private registry (NPM, GitHub Packages, or another npm-compatible host), share a read-only access token.
# Generate a read-only token
npm token create --read-only
Share this token securely with your Magic Patterns contact.

Overview

How we import documentation and component code.

Best practices

Documentation quality, usage guidance, and import paths.

Multiple packages

Monorepos, tokens, and cross-package imports.