# Folded Card
> Composable folded-corner card for React and shadcn/ui with a linked preview, dashed grid, badge, and footer, for template galleries.
Source: https://www.cult-ui.com/docs/components/folded-card
## Example
```tsx title="folded-card-demo.tsx"
"use client"
import { ArrowUpRight } from "lucide-react"
import {
ChatTail,
FoldedCard,
FoldedCardBadge,
FoldedCardBorder,
FoldedCardDescription,
FoldedCardFold,
FoldedCardFooter,
FoldedCardGrid,
FoldedCardHeading,
FoldedCardLink,
FoldedCardPreview,
FoldedCardTitle,
} from "@/components/ui/folded-card"
function UserIcon({ className }: { className?: string }) {
return (
)
}
function OpenAIIcon({ className }: { className?: string }) {
return (
)
}
function FoldedCardDemo({ href = "#" }: { href?: string }) {
return (
Chatbot
Next.js
A Next.js chatbot template featuring streaming text responses and a
chat UI.
)
}
export default FoldedCardDemo
```
Folded Card is a composable React card component for shadcn/ui. Use it for template galleries, blog indexes, or resource directories.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/folded-card
```
### Manual
**Copy and paste the following code into your project.**
```tsx title="folded-card.tsx"
"use client"
import { useId } from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"
const FOLDED_CARD_CLIP_PATH =
"polygon(0 8px, 8px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)"
function ChatTail({
className,
isLight = true,
side = "left",
}: {
className?: string
isLight?: boolean
side?: "left" | "right"
}) {
const maskId = useId().replaceAll(":", "")
const bubbleFill = isLight ? "var(--card)" : "var(--muted)"
const bubbleStroke = "var(--border)"
const mirrorTransform =
side === "right" ? "translate(24 0) scale(-1 1)" : undefined
return (
)
}
function FoldedCard({
className,
style,
...props
}: React.ComponentProps<"div">) {
return (
)
}
function FoldedCardFold({ className, ...props }: React.ComponentProps<"div">) {
const gradientId = useId().replaceAll(":", "")
return (
)
}
function FoldedCardLink({
className,
style,
...props
}: React.ComponentProps) {
return (
)
}
function FoldedCardBorder({
className,
style,
...props
}: React.ComponentProps<"div">) {
return (
)
}
function FoldedCardPreview({
className,
...props
}: React.ComponentProps<"div">) {
return (
)
}
type FoldedCardGridProps = React.ComponentProps<"div"> & {
rows?: number
columns?: number
}
function FoldedCardGrid({
className,
rows = 4,
columns = 4,
...props
}: FoldedCardGridProps) {
const rowCount = Math.max(1, Math.floor(rows))
const columnCount = Math.max(1, Math.floor(columns))
return (
{Array.from({ length: rowCount - 1 }, (_, index) => (
))}
{Array.from({ length: columnCount - 1 }, (_, index) => (
))}
)
}
function FoldedCardFooter({
className,
...props
}: React.ComponentProps<"div">) {
return (
)
}
function FoldedCardHeading({
className,
...props
}: React.ComponentProps<"div">) {
return (
)
}
function FoldedCardTitle({ className, ...props }: React.ComponentProps<"h3">) {
return (
)
}
function FoldedCardBadge({
className,
...props
}: React.ComponentProps<"span">) {
return (
)
}
function FoldedCardDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
)
}
export {
ChatTail,
FoldedCard,
FoldedCardFold,
FoldedCardLink,
FoldedCardBorder,
FoldedCardPreview,
FoldedCardGrid,
FoldedCardFooter,
FoldedCardHeading,
FoldedCardTitle,
FoldedCardBadge,
FoldedCardDescription,
}
```
**Update the import paths to match your project setup.**