MaterialCard
A contained surface wearing the project's material signature. Use for modals, dialogs, featured cards, and receipts — objects that arrive. Set the signature via the Material toolbar picker (or <AcheryProvider defaultMaterial="leather|wood|copper">); control intensity per object with the intensity prop.
Examples
Loading examples…
API
From COMPONENTS.md.
A contained surface wearing the project's material signature, for objects that arrive: dialogs, a featured card, a receipt. The working page stays paper and ink. The signature comes from <AcheryProvider defaultMaterial="leather | wood | copper">; intensity sets how loudly this object wears it.
import { MaterialCard } from 'achery-ui'
<MaterialCard intensity="surface" header="Close the month" footer={<Button>Bind & archive</Button>}>
<Body>Seal the ledger and file it to the archive.</Body>
</MaterialCard>
| Prop | Type | Default | Notes |
|---|---|---|---|
intensity |
'chrome' | 'surface' | 'full' |
'chrome' |
Spine and trim on paper · a material header band · the whole object (rare moments) |
header |
ReactNode |
— | The bar at the top; a string becomes its title |
footer |
ReactNode |
— | Below a rule; usually actions |
children |
ReactNode |
— |
Also accepts div attributes. Signatures and intensities side by side: workshop.achery.dev/materials.