INTERACTIVE SURFACES

The Swedish Candy Cart of Your Dreams — Nectar

A delightful Scandinavian confectionery storefront hero section inspired by Swedish lördagsgodis. Features pink gingham grid canvas, scalloped valance awning, vintage Piaggio Ape truck, and interactive Pick & Mix tasting menu modal.

#interactive surfaces#editorial#ecommerce#confectionery#motion#typescript

Source on GitHub

components/flourish/swedish-candy-cart-hero.tsx

LIVE PREVIEWOpen in new tab

Next.js 16 • React 19 • TypeScript•Tailwind CSS v4

Registry Slug:swedish-candy-cart-hero

QUICKSTART

Make it yours.

Install the source, then customize it in your project.

REGISTRY ITEM

PACKAGE MANAGER

pnpm dlx shadcn@latest add https://flourish-ui.vercel.app/r/swedish-candy-cart-hero.json

Adds source to components/flourish/

01Dependencies 2 packages

framer-motionlucide-react

02Usage example Next.js / React

import { SwedishCandyCartHero } from "@/components/flourish/swedish-candy-cart-hero"

export default function Page() {
  return <SwedishCandyCartHero />
}

First install? Run pnpm dlx shadcn@latest init once, then add this component. You get editable source code in your project.

EXPLORE MORE

More in Interactive Surfaces

Browse Interactive Surfaces

Auth Section Split Portal

A gorgeous, highly-converting split-screen authentication component layout built for Next.js.

Daybreak Editorial Narrative

A premium, interactive Neo-Classical design system and UI shell for long-form narrative, reading, and writing experiences. Built with Next.js 15, Tailwind CSS v4, and Framer Motion.

Digital Signature Modal

A premium, highly interactive, and functionally complete React component for capturing digital signatures in web applications. It provides a polished and legally compliant-looking interface for users to sign documents.