Getting Started Components Examples BackendNew

Getting Started

Why We Built This Getting Started Follow Updates

Installation

Installation Next.js Setup Tailwind CSS Setup CLI Add Utilities Quick Reference

Integration

Components Overview

List of Components

Layout Components

Restaurant Header Restaurant Hero

Menu Components

Menu Overview Menu Item Card Menu Search Featured Items Carousel Nutritional Info Modal

Cart & Checkout Components

Cart Overview Cart Component Cart Sidebar Checkout Overview Checkout Page Checkout Form Order Summary Upsell Suggestions

Form Components

Modifier Selector Quantity Selector Date Picker Time Slot Picker Address Picker Order Type Toggle Payment Method Selector Promo Code Input

Modal Components

Fulfillment Schedule Item Detail Payment Method Modal Phone Sign-in

Review Components

Reviews Section Review Card

Examples

Complete Restaurant

Marketing

Template Gallery Brand Customization

Sales Channel

Leclerc Bakery Xichuan Noodles

Configuration

Environment Setup API Configuration

Guides

Best Practices Theming Accessibility Styling Common Props

Help

Troubleshooting

Docs

Theming & Customization

Theming & Customization

Complete guide to theming and customizing CraveJS components for your restaurant brand.

Loading content...

On This Page

JSON-Based Theme System (Recommended for Agencies)

Quick Start with JSON Themes Agency Theme Management Real-World Example: Leclerc Bakery Migration from CSS to JSON

CSS-Based Theme System (Legacy)

Base Theme Structure

1. Install Required Dependencies 2. Configure Tailwind 3. Create Theme Provider

Pre-built Restaurant Themes

Casual Dining Theme Fine Dining Theme Fast Food Theme Cafe Theme

Component Customization

Menu Item Card Theming Custom Cart Styling

Advanced Customization

Dynamic Color Generation Theme Configuration Panel

Brand Integration Examples

Pizza Restaurant Coffee Shop

Performance Considerations

CSS Custom Properties Theme Switching

1. Maintain Accessibility 2. Brand Consistency 3. Testing Themes

Migration Guide

From Default to Custom Theme

Built by Crave Up with 5+ years of F&B experience

•

•

© 2025 CraveJS. All rights reserved.