89:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"ExplicitChatIdProvider"] 8a:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"SWRDataProvider"] 8b: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}

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

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This