}
```
**Layout Options:**
- `auto` — Component dictates its own size based on content
- `fixed` — Component fills 100% of its container
- `any` — Users can switch between auto and fixed (default)
- `any-prefer-fixed` — Same as `any`, but defaults to fixed
### Intrinsic Size (Default Insert Size)
```tsx
/**
* @framerIntrinsicWidth 200
* @framerIntrinsicHeight 100
*/
export function Card(props) {
return
Card
}
```
### Supporting Fixed Sizing
Spread the `style` prop to allow Framer to control dimensions:
```tsx
export function MyComponent(props) {
const { style, ...rest } = props
return (
Content
)
}
```
## Code Overrides
Code overrides are Higher Order Components that modify layer properties. They only run in preview and on published sites.
### Basic Override Structure
```tsx
import { forwardRef, type ComponentType } from "react"
export const withLowerOpacity = (Component): ComponentType => {
return forwardRef((props, ref) => {
return (
)
})
}
```
**Important:** Always:
1. Use `forwardRef` for React 18 compatibility
2. Spread `{...props}` to preserve existing functionality
3. Pass `ref` to the component
### Override Examples
#### Custom Attributes
```tsx
import { forwardRef, type ComponentType } from "react"
export function withDataAttributes(Component): ComponentType {
return forwardRef((props, ref) => {
return (
)
})
}
```
#### Click Tracking
```tsx
import { forwardRef, type ComponentType } from "react"
export function withClickTracking(Component): ComponentType {
return forwardRef((props, ref) => {
const handleClick = () => {
// Track the click
fetch("https://api.example.com/track", {
method: "POST",
body: JSON.stringify({ event: "click" }),
})
// Call original onClick if exists
props?.onClick?.()
}
return
})
}
```
#### Dynamic Text
```tsx
import { forwardRef, type ComponentType } from "react"
export function withDynamicText(Component): ComponentType {
return forwardRef((props, ref) => {
const text = new Date().toLocaleDateString()
return
})
}
```
### Shared State Between Overrides
Use `createStore` for state that multiple overrides need to access:
```tsx
import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
const useStore = createStore({ count: 0 })
export const withCount = (Component): ComponentType => {
return forwardRef((props, ref) => {
const [store] = useStore()
return
})
}
export const withIncrement = (Component): ComponentType => {
return forwardRef((props, ref) => {
const [store, setStore] = useStore()
const onTap = () => setStore({ count: store.count + 1 })
return
})
}
```
## Framer Motion Integration
Framer Motion is available in all code components:
```tsx
import { motion } from "framer-motion"
export function AnimatedBox(props) {
return (
)
}
```
### Transition Property Control
```tsx
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"
export function AnimatedElement(props) {
return (
)
}
addPropertyControls(AnimatedElement, {
scale: {
type: ControlType.Number,
defaultValue: 1,
min: 0.5,
max: 2,
step: 0.1,
},
transition: {
type: ControlType.Transition,
defaultValue: { type: "spring", stiffness: 800, damping: 60 },
},
})
```
## Detecting Render Context
Use `RenderTarget` to detect where your component is being rendered:
```tsx
import { RenderTarget } from "framer"
export function MyComponent(props) {
const isCanvas = RenderTarget.current() === RenderTarget.canvas
const isPreview = RenderTarget.current() === RenderTarget.preview
if (isCanvas) {
return
Canvas placeholder
}
return
Live content
}
```
**RenderTarget values:**
- `RenderTarget.canvas` — The Framer canvas
- `RenderTarget.preview` — Preview or live site
- `RenderTarget.export` — Export canvas
- `RenderTarget.thumbnail` — Project thumbnails
### Static Renderer Hook (for animations)
```tsx
import { useIsStaticRenderer } from "framer"
export function AnimatedComponent(props) {
const isStatic = useIsStaticRenderer()
if (isStatic) {
return
Static preview
}
return Animated
}
```
## Localization
Access locale info for multi-language sites:
```tsx
import { useLocaleInfo } from "framer"
export function LocalePicker(props) {
const { activeLocale, locales, setLocale } = useLocaleInfo()
return (
)
}
```
## Best Practices
1. **Always use defaultProps** — Prevents errors during development and when instances are created
2. **Spread props and style** — Preserve Framer's built-in functionality
3. **Use forwardRef in overrides** — Required for React 18 compatibility
4. **Avoid overriding `class`/`className`** — Framer relies on these for styling
5. **Use RenderTarget wisely** — Show placeholders on canvas for performance
6. **Keep components performant** — Avoid expensive operations that run on every render
7. **Use useLayoutEffect for dynamic sizing** — Works best with Framer's measuring system
## Troubleshooting
| Issue | Solution |
|-------|----------|
| Component not showing | Check for React errors in console, ensure `export default` |
| Property controls not appearing | Verify `addPropertyControls` is called after component definition |
| Styling breaks on fixed size | Spread `{...props.style}` in your root element |
| Override breaks layer | Ensure you spread `{...props}` and pass `ref` |
| Animation stutters on canvas | Use `useIsStaticRenderer()` to disable animations on canvas |
| Auto-sizing not working | Add `@framerSupportedLayoutWidth/Height` annotations |
## References
- [Framer Developers Documentation](https://www.framer.com/developers/)
- [Property Controls Reference](https://www.framer.com/developers/property-controls)
- [Code Components Introduction](https://www.framer.com/developers/components-introduction)
- [Code Overrides Introduction](https://www.framer.com/developers/overrides-introduction)
- [Framer Motion](https://motion.dev/docs/framer)