Skip to main content

Creating Kiosk Templates

Create templates for interactive touchscreen kiosks in shopping centers using v0.

What are Kiosk Templates?​

Kiosk Templates are designs for touchscreen kiosks:

  • Visitors interact directly at the kiosk
  • Screens with navigation (Home, Shops, Center Map, etc.)
  • Touch-optimized (large buttons, clear navigation)

Quick Start​

  1. Open v0 – Go to v0.dev and create a new project.

  2. Describe Design – Describe your desired kiosk design.

  3. Attach cockpitOS Prompt – Copy the prompt from Kiosk Template Prompt and paste it at the end of your v0 instructions.

  4. Generate Template – v0 will now generate a template with the correct structure for cockpitOS.

  5. Download ZIP – Download the generated template as a ZIP file.

  6. Upload to Dashboard – Go to Templates → Upload in the dashboard and upload the ZIP file.

Template Structure​

A kiosk template must have the following structure:

components/templates/kiosk-[template-name]/
├── index.ts                    # Exports Template
├── KioskTemplate.tsx           # Main Template (Client Component)
├── config.ts                   # Default Config
├── screens/                    # Screen Components
│   ├── HomeScreen.tsx          # Home Screen
│   ├── ShopsScreen.tsx         # Shops Overview
│   ├── ShopDetailScreen.tsx    # Shop Details
│   ├── CenterplanScreen.tsx    # Interactive Map
│   ├── ServicesScreen.tsx      # Services Overview
│   ├── CurrentScreen.tsx       # Content Feed
│   └── CurrentDetailScreen.tsx  # Content Detail
├── components/                 # Shared Components
│   ├── Header.tsx
│   └── Footer.tsx
├── types.ts
└── README.md

Important Requirements​

  • Client Component ('use client' required)
  • Modular Screens (each screen as a separate component)
  • Touch-optimized (large buttons, clear targets)
  • Glassmorphism supported (if enabled in Config)
  • Animations supported (if enabled in Config)
  • Theme supported (light/dark)

Further Documentation​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/templates/kiosk-templates