Accordion
Accordions display a list of high-level options that can expand and collapse to reveal or hide content.
Default
The default accordion variant with Cookest FAQ content.
Click New Recipe in the top navigation bar. Fill in the title, add ingredients using the smart ingredient picker, write your instructions step-by-step, and hit Publish. Your recipe will be live instantly.
Absolutely! Every published recipe gets a unique shareable URL. You can also export to PDF, share directly to social media, or invite collaborators to co-author a recipe collection.
Cookest supports over 80 world cuisines — from Italian and Japanese to Ethiopian and Peruvian. You can tag recipes with one or more cuisine types and filter the library accordingly.
Head to Meal Planner, choose your dietary goals (calorie target, macros, allergies), and Cookest will auto-generate a weekly plan. You can drag-and-drop meals to swap days or replace individual dishes from the library.
Bordered
The bordered variant wraps each item in a visible border, useful for cooking technique guides.
Blanching is briefly boiling vegetables for 1–3 minutes then immediately plunging them into ice water. It preserves colour, texture, and nutrients — and is the essential first step before freezing most vegetables.
After searing meat, pour a cold liquid (wine, stock, or vinegar) into the hot pan. The liquid lifts the caramelised fond from the bottom, creating an instant, flavour-packed sauce. Scrape with a wooden spoon and reduce until slightly thickened.
Folding is a gentle mixing technique that preserves air in a batter or mousse. Use a large spatula, cut down through the centre, sweep along the bottom, and fold up over the top. Repeat, rotating the bowl each time. Never stir — that deflates the mix.
A bain-marie (water bath) provides gentle, even heat — perfect for custards, crème brûlée, cheesecakes, and melting chocolate without burning it. Place your dish inside a larger pan filled with hot water and bake or heat as directed.
Separated
The separated variant adds visible gaps between items, great for ingredient substitution guides.
Flax egg — 1 tbsp ground flax + 3 tbsp water (per egg)
Best for dense baked goods like brownies.
Applesauce — 60 g (¼ cup) per egg
Adds moisture and slight sweetness.
Aquafaba — 3 tbsp per egg
Ideal for meringues and mousses.
Oat milk
Creamy flavour — excellent in coffee and sauces.
Almond milk
Light and slightly sweet; use unsweetened for savoury dishes.
Coconut milk (full-fat)
Rich and thick — perfect for curries and desserts.
Replace butter 1:1 with coconut oil (solid) for baking, or use avocado for spreads. In sautéing, extra-virgin olive oil works well — use ¾ the amount called for in the recipe.
Multiple Open
Set multiple={true} to allow several panels to be expanded simultaneously.
Olive oil, canned tomatoes, pasta, rice, lentils, tinned chickpeas, honey, soy sauce, apple cider vinegar, and a selection of nuts and seeds.
Eggs, butter, aged parmesan, dijon mustard, miso paste, Greek yoghurt, capers, and a good hot sauce.
Frozen peas, edamame, spinach, homemade stock portions, and a batch of your favourite sauce ready to defrost on busy weeknights.
Cumin, smoked paprika, turmeric, dried oregano, cinnamon, chilli flakes, and black pepper. Buy whole spices when possible and grind fresh for maximum flavour.
With Subtitle
Items can include a subtitle for secondary context below the main title.
Master the building blocks of Italian cooking — from hand-rolled pasta and silky risotto to slow-simmered ragù and a classic tiramisu. Suitable for all skill levels.
Explore the layered flavours of Japanese dashi, Thai aromatics, and Chinese five-spice. Learn to balance salty, sour, sweet, and umami in every dish.
Go beyond salads. Discover how to build bold, satisfying plant-based meals using legumes, whole grains, and fermented ingredients for maximum depth and nutrition.
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | — | Array of accordion items, each with id, title, and content. |
defaultOpen | string | string[] | — | Id(s) of the panel(s) open on initial render (uncontrolled). |
multiple | boolean | false | When true, multiple panels can be open simultaneously. |
variant | "default" | "bordered" | "separated" | "default" | Controls the visual style of the accordion container and items. |
size | "sm" | "md" | "lg" | "md" | Controls the padding and font size of accordion headers. |