95:I[903690,["/chat-static/_next/static/chunks/0u47d5oadfoae.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/31nc28k82_ikk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2u5seunoluc_i.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3u-9g8xm2ttvj.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3g-i0sw19ka_9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0jvrx24zmprk8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0hs2kgvfjpi42.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/19hl-pfz0po1q.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/38qe7e7-lwi0s.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/01khfi3185z6k.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3yuf6gvzxb0o_.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj"],"ExplicitChatIdProvider"] 96:I[838238,["/chat-static/_next/static/chunks/0u47d5oadfoae.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/31nc28k82_ikk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2u5seunoluc_i.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3u-9g8xm2ttvj.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3g-i0sw19ka_9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0jvrx24zmprk8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0hs2kgvfjpi42.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/19hl-pfz0po1q.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/38qe7e7-lwi0s.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/01khfi3185z6k.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3yuf6gvzxb0o_.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_DjUXDfD6USU1e9WkZBzPDDFvwhpj"],"SWRDataProvider"] 97: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}

) }8b:["$","$L95",null,{"chatId":"eqzb0IvitWZ","children":["$","$L96",null,{"data":{"@\"active-block\",\"eqzb0IvitWZ\",":{"id":"b_pGyw35OICRv","messageId":"9TXz0lN6mR4FbuK4gK2bhKB3BZHCynWo","source":"$97","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":"$L98"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This