The dark version uses deep panels with soft borders, so the content stands out on a dark page. Plan the week on one screen. This meal planner has a seven day grid, a calorie and protein summary, and recipe suggestions with a photo slot for each dish.

What is included

• A week grid with three meals per day and today highlighted
• Four summary cards for calories, protein, meals and groceries
• Macro bars for carbs, protein, fat and fiber
• Three recipe cards with image frames
• A list of pantry matches in the sidebar

Where to use it

Use it for a nutrition app, a recipe site or a diet coaching tool. Change the meal names and the goal numbers to fit your product.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans, a free font on Google Fonts. Install it first so the text looks the same.

Dark version

This listing is the dark version. The light version is listed separately, so you can pick the one that fits your project.