# Composition and state

Connect components, data and behavior.

## Components that work together

Compound components expose small pieces: CardHeader, CardContent and CardFooter; DialogTrigger and DialogContent; TabsList and TabsContent. Preserve the required structure and adapt the content to your product.


```tsx
<Card>
  <CardHeader>
    <CardTitle>My team</CardTitle>
    <CardDescription>The people behind the idea.</CardDescription>
  </CardHeader>
  <CardContent><Input aria-label="Email" placeholder="name@team.com" /></CardContent>
  <CardFooter><Button>Invite</Button></CardFooter>
</Card>
```


## Your application owns the state

defaultValue, defaultChecked and defaultOpen set the initial state of an uncontrolled component. Use value/checked/open with the corresponding callback when state lives in React. Do not mix both strategies in the same control.


```tsx
"use client";
import { useState } from "react";
import { Switch } from "@kivora/nextjs";

export default function Preferences() {
  const [enabled, setEnabled] = useState(true);
  return <Switch aria-label="Notifications" checked={enabled} onCheckedChange={setEnabled} />;
}
```


## Compose with asChild

When a component supports asChild, it applies its behavior to a single compatible child instead of creating another element. Use it to turn a Button into a link or use a Button as a dialog trigger.

The child must accept props and ref. Do not nest buttons inside buttons or links inside links.


```tsx
import Link from "next/link";
import { Button } from "@kivora/nextjs";

<Button asChild>
  <Link href="/docs">Read documentation</Link>
</Button>
```


## Connect services when you need them

Forms collect information; your application validates and saves it. DataTable receives rows; your service fetches them. FileUpload needs a Tus endpoint or custom transport. Player needs media and, when applicable, license services.

Separate visual state from remote state: show when an operation is pending, confirm its result and allow recovery from errors.

Source: https://kivora.pro/docs/composicion