Compositional content surface with semantic sections.
@combric/react · v1.1.1 · Current
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Current status
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@combric/react";
export function Example() {
return <Card><CardHeader><CardTitle>Project</CardTitle><CardDescription>Current status</CardDescription></CardHeader><CardContent>Ready</CardContent></Card>;
}import { Card, CardContent } from "@combric/react";
export function Example() {
return (
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(9rem, 1fr))", gap: "0.75rem" }}>
<Card tone="surface"><CardContent>Surface</CardContent></Card>
<Card tone="muted"><CardContent>Muted</CardContent></Card>
<Card tone="elevated"><CardContent>Elevated</CardContent></Card>
</div>
);
}import { Card, CardContent } from "@combric/react";
export function Example() {
return (
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(8rem, 1fr))", gap: "0.75rem" }}>
<Card><CardContent>Default</CardContent></Card>
<Card radius="none"><CardContent>None</CardContent></Card>
<Card radius="sm"><CardContent>Small</CardContent></Card>
<Card radius="md"><CardContent>Medium</CardContent></Card>
<Card radius="lg"><CardContent>Large</CardContent></Card>
<Card radius="full"><CardContent>Full</CardContent></Card>
</div>
);
}| Name |
|---|
Card |
CardHeader |
CardTitle |
CardDescription |
CardContent |
CardFooter |
| Property / capability | Published contract |
|---|---|
| tone | surface | muted | elevated |
| radius | none | sm | md | lg | full |
| Contract | Native props for each rendered element |
| Contract | compositional subcomponents |
Semantic structure is preserved; consumers remain responsible for the surrounding document outline.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.