**Already have a project set up?** This is your quick reference. **New to this library?** Start with the [complete installation guide](/docs/installation) first. ## Add Single Components ### CLI Installation (Recommended) ```bash # Replace {component-name} with any component from the list below npx shadcn@latest add https://ui.cravejs.com/registry/{component-name}.json ``` **Most Popular Components:** ```bash # Complete ordering flow starter pack npx shadcn@latest add https://ui.cravejs.com/registry/menu-item-card.json npx shadcn@latest add https://ui.cravejs.com/registry/cart-sidebar.json npx shadcn@latest add https://ui.cravejs.com/registry/checkout-form.json # Individual components npx shadcn@latest add https://ui.cravejs.com/registry/modifier-selector.json npx shadcn@latest add https://ui.cravejs.com/registry/quantity-selector.json npx shadcn@latest add https://ui.cravejs.com/registry/time-slot-picker.json ``` ### Manual Installation **Copy** the component code from [GitHub registry](https://github.com/shadcn/shadcn-restaurant-online-ordering-kit/tree/main/apps/www/registry/default/ui) **Install** peer dependencies (shown in each component's documentation) **Update** import paths to match your project structure ## Component Categories | Category | Components | Install All | | ------------ | -------------------------------------------------------------- | ----------------------------------------------- | | **Menu** | `menu-item-card`, `menu-search`, `featured-items-carousel` | [View Menu Docs](/docs/components/menu) | | **Cart** | `cart-sidebar`, `quantity-selector`, `upsell-suggestions` | [View Cart Docs](/docs/components/cart) | | **Checkout** | `checkout-form`, `payment-method-selector`, `time-slot-picker` | [View Checkout Docs](/docs/components/checkout) | | **Modals** | `item-detail-modal`, `fulfillment-schedule-modal` | [View Modals Docs](/docs/components/modals) | ## Quick Troubleshooting ### Component won't render / import errors? **Check you have these base dependencies:** ```bash npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react ``` **Ensure base shadcn/ui components are installed:** ```bash npx shadcn@latest add button card badge dialog dropdown-menu input label ``` ### Styling looks wrong? **Verify your `tailwind.config.js` includes:** ```js module.exports = { content: [ "./components/**/*.{ts,tsx}", // Your components directory "./app/**/*.{ts,tsx}", // Your app directory ], // ... rest of config }; ``` **Check your CSS variables are set up** - see [theming guide](/docs/guides/theming). ### TypeScript errors? **Common fixes:** - Update import paths: `@/components/ui/button` - Install missing `@types/` packages - Check your `tsconfig.json` paths configuration **Need the full setup?** See the [complete installation guide](/docs/installation). ## Next Steps - **Browse Components**: [Component Documentation](/docs/components) - **See Examples**: [Complete Restaurant Example](/docs/examples/complete-restaurant) - **Get Help**: [Troubleshooting Guide](/docs/troubleshooting) **Pro Tip**: Most components work together seamlessly. Start with `menu-item-card` + `cart-sidebar` for a basic ordering flow.

Quick Component Installation