Skip to main content

​
Working with multiple packages

Many design systems split across packages that depend on each other. Magic Patterns supports that layout.

​
Supported architectures

Monorepo

Multiple packages in one repository (for example Yarn workspaces, Turborepo, or Nx)

Multi-Repo

Separate repositories for packages that depend on each other

​
Cross-package references

If packages depend on each other, we account for that when syncing: 
@mycompany/tokens        # Design tokens (colors, spacing, etc.)
@mycompany/primitives    # Low-level components (Box, Text, etc.)
@mycompany/components    # High-level components (Card, Modal, etc.)
The AI can:
  • Import from the correct package
  • Use shared tokens in a consistent way
  • Respect your component layering

​
Configuration

For multiple packages, plan to share:
  1. Package list: every package that belongs to the design system
  2. Dependency graph: how those packages relate
  3. Access tokens: credentials for each private package when needed
In a monorepo, one access token often covers every package in the workspace.

​
Example: multi-package import

Generated code can follow your structure: 
import { colors, spacing } from '@mycompany/tokens'
import { Box, Text } from '@mycompany/primitives'
import { Card, Button } from '@mycompany/components'

export const PricingCard = () => {
  return (
    <Card>
      <Box padding={spacing.lg}>
        <Text color={colors.primary}>Premium Plan</Text>
        <Button variant="primary">Get Started</Button>
      </Box>
    </Card>
  )
}

Overview

How we import documentation and component code.

Component code

Package layout and how to provide access.

Best practices

Documentation quality and import paths.