Recipe Cards — v2 Spine Style
RCP-01
Tomato Egg
It's tomato, it's egg.
10m✓ 4/5
RCP-09
Corn Chowder
Like clam chowder but for poor people.
90m✓ 5/5
RCP-05
Twice Cooked Pork
jalapeños & dried tofu.
30m✓ 2/3
Stat Cards
Meals this week
14
↑ 2 vs last week
Monthly spend
$248
↓ $12 vs avg
Pantry items
127
· unchanged
Recipes
48
↑ 3 new
Data Table
view: grid
| Name | Category | Count | Status |
|---|---|---|---|
| Component A | UI | 12 | Active |
| Component B | Layout | 4 | Draft |
| Component C | UI | 7 | Active |
| Component D | Utility | 0 | Archived |
| Component E | Layout | 19 | Active |
Timeline / Activity Feed
Cooked Corn Chowder
today, 6:32 pm
Restocked Sesame Oil (12 oz)
today, 2:15 pm
Added Wakame Seaweed Salad to library
yesterday
Cooked Tomato Egg
8 days ago
Added Survival Hashbrowns to Tue meal plan
Apr 1, 2026
Skeleton Loaders
Form Inputs
Recipe name
Cook time
min
Total active + passive cook time.
Unit price
$
Store slug
✕ invalid characters in name
Location
✓ location confirmed
Meal type
Notes
Inline edit
Click to edit this label
Checkbox
Auto-add to shopping list
when pantry drops below threshold
Rotation reminders
notify when a recipe is overdue
Pantry-only filter
show only recipes you can cook now
Disabled option
Toggles
Auto-add to shopping list
when pantry stock drops below threshold
Rotation reminders
notify when a recipe is overdue
Pantry-only filter
show only recipes you can cook now
Radio Group
Overdue first
recipes past their rotation window
Pantry ready
only what you can cook right now
Recently added
newest recipes first
Alphabetical
Dropdown / Select Menu
closed
Sort by: overdue▾
open
Sort by: overdue▾
Combobox (Search + Select)
Ingredient
Slider / Range Input
Tag Input
Recipe tags
Asian
Quick
Pantry staple
Stepper / Quantity Input
servings
4
stock qty (oz)
12
File Upload
Upload recipe image
PNG, JPG or WEBP · max 4 MB
Date · Time · DateTime Pickers
Date
Time
Date & Time
Filter Pills
Tab Bar
Pagination
Page 1 of 12
Steps / Wizard
✓
Details
✓
Ingredients
3
Instructions
4
Review
Inline Action Row
Keyboard Shortcuts
⌘Ksearch·Eedit·Ccook mode·Pplan·⌘⌫delete·?shortcuts
Toasts / Notifications
Alerts / Inline Banners
Your meal plan has been synced across all devices.
Recipe added
Corn Chowder is now in your library.
Low pantry stock
3 ingredients are running low.
Sync failed
Could not connect to server.
Progress Bar
Pantry coverage75%
Monthly budget$186 / $250
Ingredients matched2/3
Syncing library…
Spinner / Loading
Loading recipes…
Syncing pantry…
Tooltips
✓ pantry ready
You have all 5 ingredients in stock.
10m
Active cook time only.
RCP-09
Recipe ID — used in meal plans & exports.
3× cooked
Last cooked 8 days ago.
Empty States
No recipes yet
Add your first recipe to start building your library.
List is empty
Items will appear here when pantry stock runs low.
Modal / Dialog
Add recipe
Name
Cook time
min
Delete recipe
This will permanently remove Corn Chowder from your library.
Drawer / Side Sheet
Popover
Command Palette
⌘Kalso works globally on this page
Badges & Tags
AsianBasicRCP-04Quicknever eaten✓ pantry ready10m3× cookedfermentingsourdough
Avatar / User Chip
JX
JX
JX
MR
AL
KP
SW
JX
MR
AL
+2
JX
Johnny Xu
owner
Callout / Prose Block
This recipe serves 4 but scales well. Double the chili paste if you prefer a spicier profile.
Tip
Bloom the spices in oil for 45 seconds before adding liquid.
Sesame oil
Add at the very end, off the heat. High temperatures destroy the flavor.
Allergen
Contains soy, sesame, and gluten.
Code Block
python
def scale_recipe(recipe, servings):
# Scale all ingredient quantities by ratio
ratio = servings / recipe['base_servings']
return {
**recipe,
'servings': servings,
'ingredients': [
{**ing, 'qty': ing['qty'] * ratio}
for ing in recipe['ingredients']
]
}Accordion
Estimated per serving: 320 kcal · 12g protein · 48g carbs · 8g fat.
Divider
or
this week
CheckList
Whole milk
Costco
✓
Ginger root
King Soop
Dried tofu sheets
H Mart
Jalapeños
Section Header
Recipe Library
48 recipessort: overdue