UI19 Mise — Food & Beverage Empire UI Kit (Next.js)

From mise en place to closing time. Restaurant operations software UI kit for full-service venues, bars, cafés, and ghost kitchens. Built for Next.js 16 App Router with static export, Tailwind v4, GSAP + Motion + Lenis.

What's inside

• OKLCH-tokenised berry / magenta palette (hue 315°) with light + dark mode and a single-file rebrand path
• Lora display + Geist body — editorial-serif headings, sans body and mono. Mobile fallback is Georgia for serif consistency under throttled connections.
• 25 marketing-side routes — home with floor-plan dashboard hero, /features, /solutions (4 use-case cards), /about, /contact, /pricing, /blog (listing + 4 SSG F&B posts), full legal scaffold (privacy, terms, cookie-policy, accessibility, security, dmca, do-not-sell)
• Auth shell — split-layout login with branded berry mood panel, two-step register wizard with venue-type selector (Restaurant / Bar / Café / Ghost kitchen), forgot-password card with check-inbox state
• 8-route dashboard — Overview, Reservations, Menu, Orders, Inventory, Staff, Analytics, Reviews + Settings
• 6 kit-specific dashboard widgets:
  • InteractiveFloorPlan — 12-table grid with state colour cues (Available / Reserved / Seated / Dirty) and one-tap actions
  • KitchenDisplayBoard — four-column kanban with countdown ticker (green → amber → red), station routing badges
  • MenuBoard + MenuItemCard — categories, modifiers, allergen badges, 86'd toggle
  • RevenueHeatmap — 24-hour × 7-day intensity grid driven by color-mix(brand-accent N%) so a rebrand cascades automatically
  • ShiftCalendar — 7-day shift grid with role-colour bands (FOH / BOH / Mgmt) and a labour-cost ratio readout
  • ReviewAggregator — Google · TripAdvisor · Yelp aggregator with sentiment tagging and a reply composer
• Compliance scaffolding (Gate 17) — UK / EU / US baselines: registered-entity footer block, GDPR + UK GDPR + DUAA 2025 ready privacy, DMCA designated-agent page, CCPA/CPRA Do Not Sell, ePrivacy cookie-consent component, footer regional gating via SITE_CONFIG.regions
• Animation stack — CSS entrance animations for above-fold LCP, Motion (Motion (motion/react)) for interactive UI, GSAP scroll-pinned How It Works walkthrough, Lenis smooth scroll
• Accessibility — skip link, focus-visible rings, ARIA labels on every dashboard widget, min-h-11 / min-w-11 touch targets, reduced-motion support gates every animation, status messages with role="status" / role="alert"

Quick start

# Bootstrap pnpm (the kit pins `packageManager` so Corepack picks the right version)
corepack enable

pnpm install
pnpm dev

See INSTALLATION.md for full setup instructions, including the manual npm i -g pnpm fallback if Corepack isn't available.

Static export

Mise is built as a fully static site for any CDN — no Node runtime required at the buyer's edge.

pnpm build
# → out/ contains 32 prerendered routes ready to deploy

Customisation

See CUSTOMIZATION.md for the rebranding checklist:

• src/lib/site-config.ts — brand name, tagline, contacts, legal entity, region toggles
• src/app/globals.css — single OKLCH hue swap rebrands every surface (replace 315 with your accent hue)
• src/lib/tokens.ts — non-CSS hex fallbacks (Three.js, global-error, magic-bento glow strings)
• src/lib/dashboard-data.ts — replace every dashboard array with your live data sources
• src/lib/blog-data.ts + src/app/blog/[slug]/page.tsx — wire your CMS or replace the four sample F&B posts

Demo content

Warning: Every page marked with /* DEMO_CONTENT */ contains placeholder text and fictitious testimonials. You must replace all demo content before publishing. See DEMO_CONTENT.md for a full inventory.

Compliance

See COMPLIANCE.md for the Gate 17 scaffold table and the kit-vs-buyer split. Mise ships:

• Footer registered-entity block (Companies Act §82) — driven by SITE_CONFIG.legalEntity
• AI-disclosure component (unused on this kit; available if you wire AI features)
• /dmca/, /do-not-sell/, /accessibility/, /cookie-policy/, /privacy/, /terms/ route scaffolding
• Region-conditional footer links via SITE_CONFIG.regions + compliance.*

Documentation

Quality gates

pnpm typecheck                  # zero TypeScript errors
pnpm lint                       # zero ESLint warnings or errors
pnpm build                      # static export — 32 prerendered routes
pnpm dev                        # zero browser-console errors

Licence

See LICENCE.md for terms.

— Halbon Labs · Empire UI Kits