> ## Documentation Index
> Fetch the complete documentation index at: https://docs.craveup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Pre-built React components for menu browsing, cart management, checkout, and fulfillment.

Crave provides restaurant-specific React components that integrate with your [shadcn/ui](https://ui.shadcn.com) design system. Drop them into your storefront to handle menu display, cart logic, checkout, and fulfillment — then style them to match your brand.

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/components/installation">
    Set up dependencies, project structure, and component source in your storefront.
  </Card>
</CardGroup>

## Menu & Products

Display menus, categories, and product cards.

<CardGroup cols={2}>
  <Card title="CategoryTabs" icon="list" href="/components/menu/category-tabs">
    Sticky tab navigation for menu categories with active indicator.
  </Card>

  <Card title="MenuSwitcher" icon="repeat" href="/components/menu/menu-switcher">
    Dropdown to switch between menus (lunch, dinner) with availability.
  </Card>

  <Card title="Item" icon="square" href="/components/menu/item">
    Product card — renders vertical or horizontal with quick-add.
  </Card>

  <Card title="ItemCarousel" icon="images" href="/components/menu/item-carousel">
    Carousel for featured or recommended menu items.
  </Card>
</CardGroup>

## Modifiers

Product customization — sizes, toppings, special instructions.

<CardGroup cols={2}>
  <Card title="ModifierGroup" icon="sliders-horizontal" href="/components/modifiers/modifier-group">
    Renders modifier groups (e.g., size, toppings) with selection state.
  </Card>

  <Card title="ProductDescriptionScreen" icon="maximize" href="/components/modifiers/product-description-screen">
    Full-screen modal for product details, modifiers, and add-to-cart.
  </Card>

  <Card title="SpecialInstructions" icon="message-square" href="/components/modifiers/special-instructions">
    Textarea for customer special requests and dietary notes.
  </Card>

  <Card title="ItemCounterButton" icon="plus" href="/components/modifiers/item-counter-button">
    Quantity selector with increment/decrement buttons.
  </Card>
</CardGroup>

## Cart

Manage the shopping cart.

<CardGroup cols={2}>
  <Card title="CartPanel" icon="shopping-cart" href="/components/cart/cart-panel">
    Side drawer showing cart contents with checkout CTA.
  </Card>

  <Card title="CartNavButton" icon="shopping-bag" href="/components/cart/cart-nav-button">
    Header button showing item count — opens the cart panel.
  </Card>

  <Card title="CartItemRow" icon="rows-3" href="/components/cart/cart-item-row">
    Individual cart item with modifiers, quantity controls, and price.
  </Card>

  <Card title="CartRelatedItems" icon="sparkles" href="/components/cart/cart-related-items">
    Recommended upsell items shown inside the cart.
  </Card>
</CardGroup>

## Checkout

Customer details, payments, and order submission.

<CardGroup cols={2}>
  <Card title="CheckoutComponent" icon="credit-card" href="/components/checkout/checkout-component">
    Main checkout layout orchestrating all checkout sections.
  </Card>

  <Card title="CustomerDetailsForm" icon="user" href="/components/checkout/customer-details-form">
    Form for name, email, and phone with validation.
  </Card>

  <Card title="PaymentForm" icon="lock" href="/components/checkout/payment-form">
    Stripe PaymentElement wrapper for card and payment methods.
  </Card>

  <Card title="TipSelector" icon="heart" href="/components/checkout/tip-selector">
    Interactive tip selection with presets and custom input.
  </Card>

  <Card title="OrderTimePicker" icon="clock" href="/components/checkout/order-time-picker">
    ASAP or scheduled pickup/delivery time selector.
  </Card>

  <Card title="ApplyPromoCode" icon="tag" href="/components/checkout/apply-promo-code">
    Promo code input with validation and discount display.
  </Card>
</CardGroup>

## Fulfillment

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

<CardGroup cols={2}>
  <Card title="FulfilmentMethodHandler" icon="truck" href="/components/fulfillment/fulfilment-method-handler">
    Routes to the correct fulfillment UI based on method.
  </Card>

  <Card title="DeliveryFulfillment" icon="map-pin" href="/components/fulfillment/delivery">
    Address picker and delivery details.
  </Card>

  <Card title="TableSideFulfillment" icon="utensils" href="/components/fulfillment/table-side">
    Table number selection for dine-in service.
  </Card>

  <Card title="SelectRoomNumber" icon="door-open" href="/components/fulfillment/room-service">
    Room number and guest name input for hotel room service.
  </Card>
</CardGroup>

## Post-Order

Order confirmation and feedback.

<CardGroup cols={2}>
  <Card title="OrderConfirmation" icon="circle-check" href="/components/post-order/order-confirmation">
    Thank-you screen with order details and next steps.
  </Card>

  <Card title="ExperienceRating" icon="star" href="/components/post-order/experience-rating">
    Star rating component for post-order feedback.
  </Card>
</CardGroup>
