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

Modifier Selector

Modifier Selector

A flexible component for selecting item customizations, add-ons, and variations like sizes, toppings, and extras.

Loading content...

On This Page

New Features (Enhanced Version)

✨ Split Customization Support ✨ Dynamic Pricing ✨ Enhanced Availability

Enhanced Usage: Pizza Builder

Split Application Usage

Enhanced ModifierSelectorProps ModifierSelection Interface Enhanced ModifierOption Interface Enhanced ModifierGroup Interface

Implementation Status

✅ Currently Available 🚧 Enhanced Features (In Development)📋 Roadmap

Migration Guide

Real-World Examples

Pizza Restaurant Burger Joint Coffee Shop

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

•

•

© 2025 CraveJS. All rights reserved.