> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer

> Interactive Hey Chocolate components for Framer projects.

The Hey Chocolate Framer integration provides React-based components that work natively in Framer projects with full property controls.

## Installation

Install the Hey Chocolate package in your Framer project:

```bash theme={null}
npm install @heychocolate/framer
```

Or add it via Framer's package manager.

## Components

### Carbon Badge

```tsx theme={null}
import { CarbonBadge } from '@heychocolate/framer';

export default function ProductBadge() {
  return (
    <CarbonBadge
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      variant="detailed"
      theme="light"
    />
  );
}
```

### Impact Calculator

```tsx theme={null}
import { ImpactCalculator } from '@heychocolate/framer';

export default function Calculator() {
  return (
    <ImpactCalculator
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      showScenarios={true}
      showBreakdown={true}
    />
  );
}
```

### Comparison Table

```tsx theme={null}
import { ComparisonTable } from '@heychocolate/framer';

export default function Compare() {
  return (
    <ComparisonTable
      productIds={["prod_abc123", "prod_def456"]}
      apiKey="sk_live_your_key"
      metrics={["co2", "mki", "water"]}
    />
  );
}
```

### Supply Chain Viewer

```tsx theme={null}
import { SupplyChainViewer } from '@heychocolate/framer';

export default function SupplyChain() {
  return (
    <SupplyChainViewer
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      layout="graph"
      height="500px"
    />
  );
}
```

## Property controls

All components expose Framer property controls for visual editing:

```tsx theme={null}
import { addPropertyControls, ControlType } from 'framer';
import { CarbonBadge } from '@heychocolate/framer';

addPropertyControls(CarbonBadge, {
  productId: { type: ControlType.String, title: 'Product ID' },
  variant: {
    type: ControlType.Enum,
    title: 'Variant',
    options: ['compact', 'detailed', 'inline'],
  },
  theme: {
    type: ControlType.Enum,
    title: 'Theme',
    options: ['light', 'dark', 'auto'],
  },
});
```

## Overrides

Use Framer overrides to connect sustainability data to custom designs:

```tsx theme={null}
import { Override } from 'framer';
import { HeyChocolate } from '@heychocolate/sdk';

const client = new HeyChocolate({ apiKey: 'sk_live_your_key' });

export function withImpactScore(): Override {
  const [score, setScore] = useState(null);

  useEffect(() => {
    client.products.get('prod_abc123').then(product => {
      setScore(product.impactScore.co2Equivalent);
    });
  }, []);

  return {
    text: score ? `${score} kg CO2e` : 'Loading...',
  };
}
```