Component reference
ResourceCard
One prepared capability on an overview page: what it is, whether it runs, what to do next.
Preview
Long names, identity and disabled actions
Content pressure scenarios for the real public components; no business request is simulated.
render: () => (
<Stack>
<PageHeader
title={longContentCopy.pageTitle}
description={longContentCopy.purpose}
actions={<Button size="small">{longContentCopy.action}</Button>}
/>
<ResourceCard
title={longContentCopy.title}
subtitle={longContentCopy.category}
description={longContentCopy.description}
icon={<Icon name="folder" />}
status={<Status state="success" label={longContentCopy.status} />}
identity="workspace:development-documentation-service"
actions={<Button size="small">{longContentCopy.action}</Button>}
/>
<ResourceCard
title={longContentCopy.emptyTitle}
tone="muted"
description={longContentCopy.emptyDescription}
actions={
<Button size="small" disabled>
{longContentCopy.action}
</Button>
}
/>
</Stack>
)Installation
bun add meowtail
Usage
import { ResourceCard } from "meowtail";API reference
Props
| Prop | Type | Default |
|---|---|---|
titleRequired | Child | – |
subtitleWhat kind of thing it is, for example "Channel · Message card". | Child | – |
icon | Child | – |
statusThe state in words with its dot. | Child | – |
description | Child | – |
actions | Child | – |
identityThe checkable technical identity, shown in monospace and low weight. | Child | – |
tone"muted" is something present but not running: a dashed outline and quieter text. | "default" | "muted" | "default" |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootheadiconcopytitlesubtitlestatusdescriptionactionsidentity
Registry
The component is registered as resource-card in the meowtail component registry.