Card

Container with a sketch border. Optional offset rectangle behind it reads as a paper shadow. The border draws in on mount.

Field notes

A container with a sketch border. Text inside stays HTML.

Roughness1.5Lock seedShadowAnimate

<Card title="Field notes" shadow={true} roughness={1.5}>
  A container with a sketch border.
</Card>

CLI install

npx doodleui-react add card

Usage

import { Card } from "doodleui-react";

// Compound (preferred)
<Card>
  <Card.Header>
    <Card.Title>Field notes</Card.Title>
    <Card.Description>Optional subtitle</Card.Description>
  </Card.Header>
  <Card.Content>A container with a sketch border.</Card.Content>
  <Card.Footer>Actions</Card.Footer>
</Card>

// Legacy props still work
<Card title="Field notes" footer="Actions" shadow>
  Body
</Card>

// Polymorphic root
<Card asChild>
  <article>…</article>
</Card>

Named exports (CardHeader, CardTitle, …) are also available. Cards do not bundle drop-shadow CSS — the shadow is another rough.js rectangle.

Props

Prop	Type	Default	Notes
title	ReactNode	undefined	Optional heading inside the card.
footer	ReactNode	undefined	Optional footer row.
shadow	boolean	true	Offset hachure rectangle behind the card.
fill	string	undefined	rough.js fill color for the face rectangle.
animate	boolean	true	Draw-in the border on mount. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.