Skip to main content
Crave provides restaurant-specific React components that integrate with your shadcn/ui design system. Drop them into your storefront to handle menu display, cart logic, checkout, and fulfillment — then style them to match your brand. Display menus, categories, and product cards.

CategoryTabs

Sticky tab navigation for menu categories with active indicator.

MenuSwitcher

Dropdown to switch between menus (lunch, dinner) with availability.

Item

Product card — renders vertical or horizontal with quick-add.

ItemCarousel

Carousel for featured or recommended menu items.

Modifiers

Product customization — sizes, toppings, special instructions.

ModifierGroup

Renders modifier groups (e.g., size, toppings) with selection state.

ProductDescriptionScreen

Full-screen modal for product details, modifiers, and add-to-cart.

SpecialInstructions

Textarea for customer special requests and dietary notes.

ItemCounterButton

Quantity selector with increment/decrement buttons.

Cart

Manage the shopping cart.

CartPanel

Side drawer showing cart contents with checkout CTA.

CartNavButton

Header button showing item count — opens the cart panel.

CartItemRow

Individual cart item with modifiers, quantity controls, and price.

CartRelatedItems

Recommended upsell items shown inside the cart.

Checkout

Customer details, payments, and order submission.

CheckoutComponent

Main checkout layout orchestrating all checkout sections.

CustomerDetailsForm

Form for name, email, and phone with validation.

PaymentForm

Stripe PaymentElement wrapper for card and payment methods.

TipSelector

Interactive tip selection with presets and custom input.

OrderTimePicker

ASAP or scheduled pickup/delivery time selector.

ApplyPromoCode

Promo code input with validation and discount display.

Fulfillment

Order fulfillment method selection — delivery, pickup, table-side, room service.

FulfilmentMethodHandler

Routes to the correct fulfillment UI based on method.

DeliveryFulfillment

Address picker and delivery details.

TableSideFulfillment

Table number selection for dine-in service.

SelectRoomNumber

Room number and guest name input for hotel room service.

Post-Order

Order confirmation and feedback.

OrderConfirmation

Thank-you screen with order details and next steps.

ExperienceRating

Star rating component for post-order feedback.