Structured empty-result content with consumer-owned actions.
@combric/react · v1.1.1 · Current
import { EmptyState, EmptyStateMedia, EmptyStateTitle, EmptyStateDescription, EmptyStateActions } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Create a project to begin.
import { Button, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateTitle } from "@combric/react";
export function Example() {
return <EmptyState><EmptyStateTitle level={3}>No projects</EmptyStateTitle><EmptyStateDescription>Create a project to begin.</EmptyStateDescription><EmptyStateActions><Button>Create project</Button></EmptyStateActions></EmptyState>;
}Create a project to begin.
Recent updates will appear here.
Try a different search.
import { EmptyState, EmptyStateDescription, EmptyStateTitle } from "@combric/react";
export function Example() {
return <div style={{ display: "grid", gap: "1rem" }}><EmptyState><EmptyStateTitle level={2}>No projects</EmptyStateTitle><EmptyStateDescription>Create a project to begin.</EmptyStateDescription></EmptyState><EmptyState><EmptyStateTitle level={4}>No activity</EmptyStateTitle><EmptyStateDescription>Recent updates will appear here.</EmptyStateDescription></EmptyState><EmptyState><EmptyStateTitle level={6}>No results</EmptyStateTitle><EmptyStateDescription>Try a different search.</EmptyStateDescription></EmptyState></div>;
}| Name |
|---|
EmptyState |
EmptyStateMedia |
EmptyStateTitle |
EmptyStateDescription |
EmptyStateActions |
| Property / capability | Published contract |
|---|---|
| title level | 2 through 6 |
| Contract | compositional media/description/actions |
Selectable heading level lets consumers preserve their document outline; application state remains external.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.