Composition and state
Connect components, data and behavior.
The idea is still yours.
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.
1<Card>
2 <CardHeader>
3 <CardTitle>My team</CardTitle>
4 <CardDescription>The people behind the idea.</CardDescription>
5 </CardHeader>
6 <CardContent><Input aria-label="Email" placeholder="[email protected]" /></CardContent>
7 <CardFooter><Button>Invite</Button></CardFooter>
8</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.
1"use client";
2import { useState } from "react";
3import { Switch } from "@kivora/nextjs";
4
5export default function Preferences() {
6 const [enabled, setEnabled] = useState(true);
7 return <Switch aria-label="Notifications" checked={enabled} onCheckedChange={setEnabled} />;
8}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.
1import Link from "next/link";
2import { Button } from "@kivora/nextjs";
3
4<Button asChild>
5 <Link href="/docs">Read documentation</Link>
6</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.
Continue with Button or explore the web component catalog.