AcheryWorkshop
Layout

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.