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

Tailwind CSS Setup

Tailwind CSS Setup

Configure Tailwind CSS for optimal CraveJS integration.

Loading content...

On This Page

1. Install Tailwind CSS 2. Install required plugins

1. Update tailwind.config.js 2. Add CSS Variables

Restaurant Theme Presets

Casual Dining Theme Fine Dining Theme Fast Food Theme

Responsive Design

Mobile-First Examples

Performance Optimization

Purge Unused Styles Custom Utilities

Troubleshooting

Styles Not Loading Build Issues Performance Issues

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

•

•

© 2025 CraveJS. All rights reserved.