Installation
pnpm dlx shadcn@latest add https://propcore.dev/r/card.jsonUsage
import {
Card,
CardWithTexture,
CardBar,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
CardDivider,
CardBadge,
CardAccentStripe,
CardStamp,
} from "@/components/ui/card"<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Worker Bulletin</CardTitle>
<CardDescription>Daily report from the collective</CardDescription>
</CardHeader>
<CardContent>
<p>Production quota exceeded by 127%.</p>
</CardContent>
<CardFooter>
<Button className="w-full">Acknowledge</Button>
</CardFooter>
</Card>Examples
Default
Basic card with header, content, and footer.
Production quota exceeded by 127%. All comrades report to assembly hall for commendation ceremony.
With Texture
Halftone dot overlay for authentic print texture.
The subtle halftone dot pattern adds that vintage propaganda poster feel, like ink pressed onto rough paper.
With Bar
Decorative top/bottom bars in black, red, or gold.
The default industrial look.
For important announcements.
For commendations and awards.
With Badge
Circular gold badge in the corner for numbering or labels.
The circular gold badge adds a sense of importance and collectibility.
Use any short text to label your cards.
With Accent Stripe
Diagonal red stripe cutting across the corner.
The diagonal red stripe cuts across the corner, adding dynamic tension to the composition. A signature element of constructivist design.
With Divider
Decorative section divider with propcore styling.
The decorative divider uses the propcore design language: thick lines, a red accent dash, and a rotated gold diamond.
Use multiple dividers to separate distinct sections within a card.
Stamped
Propaganda-style rotated corner stamp that breaks out of card bounds.
The rotated stamp breaks out of bounds, creating visual tension.
Custom content inside for different meanings.
Different positions and variants for variety.
Rotated
Add visual tension with slight rotation. Nothing sits perfectly straight.
Slight counter-clockwise tilt for visual tension.
Slight clockwise tilt for visual tension.
Randomly picks left or right rotation.
Full Propaganda
All card features combined for maximum Soviet aesthetic.
This card demonstrates the full propcore aesthetic: halftone texture, corner stamp, diagonal stripe, decorative bars, and dividers.