8e:I[903690,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1uxdv-3jy4-uk.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/32xjj617blghe.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0voy48k9w-x1s.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0d89trthlp2gl.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1uxdv-3jy4-uk.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/32xjj617blghe.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0voy48k9w-x1s.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH","/chat-static/_next/static/chunks/0d89trthlp2gl.js?dpl=dpl_AFmvKWx2G73mcaFbwB6yRYw9P4LH"],"SWRDataProvider"] 90:T2a7f,[V0_FILE]typescriptreact:file="components/kokonutui/card-08.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import CardGrid from "@/components/kokonutui/card-grid" export default function Home() { // Sample collection data const collections = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] return (

) } [V0_FILE]typescriptreact:file="components/kokonutui/card-grid.tsx" isEdit="true" import Card08, { type Card08Props } from "./card-08" interface CardGrid { items: Card08Props[] gridTitle?: string } const collections: Card08Props[] = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] export default function CardGrid({ items = collections, gridTitle = "Collections 2025 - Summer" }: CardGrid) { if (!items || items.length === 0) { return (

No items to display.

) } return (

{gridTitle && (

{gridTitle}

)}

Explore the latest collections for the summer season.

{items.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/card/card-08.tsx" isDeleted="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) }84:["$","$L8e",null,{"chatId":"eqzb0IvitWZ","children":["$","$L8f",null,{"data":{"@\"active-block\",\"eqzb0IvitWZ\",":{"id":"b_pGyw35OICRv","messageId":"9TXz0lN6mR4FbuK4gK2bhKB3BZHCynWo","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"eqzb0IvitWZ\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This