---
title: "combine"
description: "Composes [tva](https://pitlane.tools/package/theme/function/tva.md) components, like cva's `compose`. Each input resolves independently against the shared props, the results deep-merge in argument order, and one [css](https://pitlane.tools/package/theme/function/css.md) call produces the descriptor. The result accepts the union of the inputs' props and honors each input's own defaults."
url: "https://pitlane.tools/package/theme/function/combine"
---

# combine

```ts
import { combine } from "@pitlane/theme";
```

```ts
function combine<Fns>(...fns): CombinedTVAFn<Fns>;
```

Composes [tva](https://pitlane.tools/package/theme/function/tva.md) components, like cva's `compose`. Each input resolves independently against the shared props, the results deep-merge in argument order, and one [css](https://pitlane.tools/package/theme/function/css.md) call produces the descriptor. The result accepts the union of the inputs' props and honors each input's own defaults.

## Type Parameters

### Fns

`Fns` _extends_ readonly [`TVAFn`](https://pitlane.tools/package/theme/interface/TVAFn.md)\<`VariantShape`>\[\]

## Parameters

### fns

...`Fns`

## Returns

[`CombinedTVAFn`](https://pitlane.tools/package/theme/interface/CombinedTVAFn.md)\<`Fns`>

## See

[CombinedTVAFn](https://pitlane.tools/package/theme/interface/CombinedTVAFn.md)

## Example

```tsx
export let pillButton = combine(button, rounded);
<button mix={pillButton({ intent: "primary", pill: true })} />;
```