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

# API reference for the styledConfig function

> Creates a typed config object shared between multiple styled components. Same type inference as styled() — zero generics needed.

## Signature

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
// With context
function styledConfig<T, U>(
  components: [T, U],
  config: {
    context: StyledContext,
    base?: Props<T> & Props<U>,
    variants?: { [name: string]: { [value: string]: Props<T> & Props<U> } },
    defaultVariants?: { [name: string]: string | boolean },
    compoundVariants?: CompoundVariant[],
  }
): typeof config

// Without context
function styledConfig<T, U>(
  components: [T, U],
  config: {
    base?: Props<T> & Props<U>,
    variants?: { [name: string]: { [value: string]: Props<T> & Props<U> } },
    defaultVariants?: { [name: string]: string | boolean },
    compoundVariants?: CompoundVariant[],
  }
): typeof config
```

## Parameters

<ParamField path="components" type="[ElementType, ElementType]" required>
  A tuple of two components that will share this config. Used only for type inference — not stored or used at runtime.

  ```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
  styledConfig([UniwindImage, UniwindImageBg], { ... })
  ```
</ParamField>

<ParamField path="config" type="object" required>
  Configuration object. Identical structure to `styled()` config — see [styled() Config Properties](/api/styled#config-properties) for details.

  The config is validated against **both** components. If a variant value sets a prop that doesn't exist on one of the components, TypeScript will error.
</ParamField>

## Returns

The exact same config object (identity function). Zero runtime overhead — exists purely for type inference.

## Example

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
const config = styledConfig([UniwindImage, UniwindImageBg], {
  context: ImageCtx,
  base: { className: "rounded-lg" },
  variants: {
    variant: {
      solid: { className: "bg-black" },
      bordered: { className: "border-2" },
    },
  },
});

const StyledImage = styled(UniwindImage, config);
const StyledImageBg = styled(UniwindImageBg, config);
```

## Type Safety

The config is validated against both components simultaneously. If a variant sets a prop that only exists on one component, TypeScript will catch it:

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
// ❌ TypeScript error — "onLoad" exists on Image but not on Text
const config = styledConfig([Image, Text], {
  variants: {
    variant: {
      solid: { onLoad: () => {} },
    },
  },
});
```

## See Also

* [Shared Config](/concepts/context#shared-config) — When and why to use styledConfig
* [styled()](/api/styled) — Create individual styled components
* [TypeScript Guide](/guides/typescript#shared-configs) — Type inference details