A card component with a folded paper corner accent, speech-bubble chat tails, and dashed grid background, useful for template/preview galleries like chatbot or app showcase cards.
"use client";
import {
ChatTail,
FoldedCard,
FoldedCardBadge,
FoldedCardBorder,
FoldedCardDescription,
FoldedCardFold,
FoldedCardFooter,
FoldedCardGrid,
FoldedCardHeading,
FoldedCardLink,
FoldedCardPreview,
FoldedCardTitle,
} from "@/components/ui/folded-card";
import { ArrowUpRight } from "lucide-react";
function UserIcon({ className }: { className?: string }) {
return (
<svg
aria-hidden="true"
className={className}
fill="none"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
>
<path
d="M5.125 5.875a2.875 2.875 0 1 1 5.75 0a2.875 2.875 0 0 1-5.75 0ZM2.75 13a4.5 4.5 0 0 1 9 0"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.4"
/>
</svg>
);
}
function OpenAIIcon({ className }: { className?: string }) {
return (
<svg
aria-hidden="true"
className={className}
fill="currentColor"
focusable="false"
height="14"
viewBox="8 3 16 14"
width="16"
>
<path d="M22.077 8.7301C22.399 7.7768 22.288 6.7325 21.773 5.8653C20.999 4.5353 19.443 3.851 17.923 4.173C17.247 3.4214 16.275 2.9939 15.257 3.0001C13.703 2.9966 12.325 3.9836 11.847 5.4422C10.848 5.6439 9.987 6.2604 9.483 7.1341C8.703 8.4606 8.881 10.1328 9.923 11.2703C9.601 12.2236 9.712 13.268 10.226 14.1351C11.001 15.4651 12.557 16.1494 14.077 15.8274C14.753 16.579 15.724 17.0065 16.743 16.9999C18.297 17.0039 19.676 16.016 20.154 14.556C21.152 14.3543 22.014 13.7379 22.518 12.8642C23.297 11.5376 23.119 9.8668 22.077 8.7292L22.077 8.7301ZM16.744 16.0851C16.122 16.086 15.519 15.8712 15.042 15.4778C15.063 15.4665 15.101 15.4459 15.125 15.431L17.951 13.821C18.095 13.74 18.184 13.5882 18.183 13.4242V9.494L19.377 10.1743C19.39 10.1805 19.398 10.1927 19.4 10.2067V13.4614C19.398 14.9086 18.21 16.082 16.744 16.0851ZM11.031 13.6775C10.719 13.1463 10.607 12.5238 10.714 11.9196C10.735 11.9318 10.772 11.9541 10.798 11.969L13.623 13.579C13.766 13.6617 13.944 13.6617 14.087 13.579L17.537 11.6137V12.9744C17.537 12.9884 17.531 13.002 17.52 13.0107L14.664 14.6378C13.392 15.3606 11.767 14.9309 11.032 13.6775H11.031ZM10.288 7.5922C10.598 7.0602 11.088 6.6533 11.671 6.442C11.671 6.466 11.67 6.5085 11.67 6.5382V9.7587C11.669 9.9223 11.758 10.0742 11.902 10.1551L15.351 12.1199L14.157 12.8003C14.145 12.8081 14.13 12.8095 14.117 12.8038L11.26 11.1754C9.991 10.45 9.556 8.8474 10.287 7.5926L10.288 7.5922ZM20.098 9.8449L16.649 7.8796L17.843 7.1997C17.855 7.1918 17.87 7.1905 17.883 7.1962L20.74 8.8233C22.011 9.5483 22.447 11.1535 21.712 12.4083C21.402 12.9394 20.912 13.3463 20.329 13.558V10.2413C20.33 10.0777 20.242 9.9263 20.098 9.8449H20.098ZM21.286 8.08C21.265 8.0673 21.229 8.0454 21.202 8.0305L18.377 6.4205C18.234 6.3378 18.057 6.3378 17.913 6.4205L14.464 8.3858V7.0252C14.463 7.0112 14.47 6.9976 14.48 6.9889L17.337 5.3618C18.608 4.6372 20.233 5.0669 20.968 6.3217C21.279 6.8528 21.391 7.4753 21.286 8.08ZM13.817 10.506L12.623 9.8252C12.61 9.8177 12.602 9.8046 12.6 9.7902V6.5382C12.601 5.0884 13.793 3.9132 15.261 3.9145C15.882 3.9145 16.485 4.1293 16.962 4.5227C16.941 4.534 16.904 4.5541 16.879 4.569L14.054 6.179C13.91 6.26 13.821 6.4118 13.822 6.5758L13.817 10.506ZM14.463 9.1328L16 8.25L17.537 9.1323V10.8968L16 11.7791L14.463 10.8968V9.1328Z" />
</svg>
);
}
function FoldedCardDemo({ href = "#" }: { href?: string }) {
return (
<FoldedCard>
<FoldedCardFold />
<FoldedCardLink href={href}>
<FoldedCardBorder />
<FoldedCardPreview>
<FoldedCardGrid />
<div className="absolute inset-0 flex items-center justify-center">
<div className="relative mx-auto flex h-[168px] w-[224px] max-w-[256px] flex-col">
<div className="relative flex h-full w-full flex-col">
<div className="flex flex-col gap-5">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm">
<UserIcon className="h-4 w-4" />
</div>
<div className="relative h-8 w-[78px] rounded-full border border-border bg-card shadow-sm">
<ChatTail
className="absolute bottom-[-3px] left-[-6px] h-5 w-5"
isLight
/>
</div>
</div>
<div className="flex items-center justify-end gap-3">
<div className="relative h-8 w-[108px] rounded-full border border-border bg-card shadow-sm">
<ChatTail
className="absolute right-[-6px] bottom-[-3px] h-5 w-5"
isLight
side="right"
/>
</div>
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm">
<OpenAIIcon className="h-4 w-4" />
</div>
</div>
<div className="relative mt-4 h-10 w-full rounded-lg border border-border bg-card shadow-sm">
<div className="absolute inset-y-1.5 right-1.5 flex w-6 items-center justify-center rounded-sm bg-primary text-[22px] text-primary-foreground leading-none">
<ArrowUpRight className="size-4" />
</div>
</div>
</div>
</div>
</div>
</div>
</FoldedCardPreview>
<FoldedCardFooter>
<FoldedCardHeading>
<FoldedCardTitle>Chatbot</FoldedCardTitle>
<FoldedCardBadge>Next.js</FoldedCardBadge>
</FoldedCardHeading>
<FoldedCardDescription>
A Next.js chatbot template featuring streaming text responses and a
chat UI.
</FoldedCardDescription>
</FoldedCardFooter>
</FoldedCardLink>
</FoldedCard>
);
}
export default FoldedCardDemo;
Part of cult ui — browse the full library on 21st.dev.