Back to Docs
UX Pattern

Recipe Disclosure

Progressive reveal of configuration complexity so users see value before they see knobs.

The Pattern

Recipe Disclosure is a content-first UX pattern where a pre-configured “recipe” is shown in its finished state before exposing the individual ingredients and controls that produced it. The user evaluates the outcome first, then drills into the parameters only if they need to customize.

Why It Works

1

Immediate Value

The user sees a working result instantly. No blank canvas paralysis.

2

Safe Exploration

Tweaking a known-good starting point feels safer than building from zero.

3

Reduced Cognitive Load

Defaults carry intent. Users learn the system by reading recipes, not manuals.

4

Power User Path

Advanced controls stay hidden until requested. No clutter for the 80% case.

Implementation

RecipeCard.tsx
// 1. Show the cooked result
<RecipeCard
  title="Daily Digest"
  summary="Sends at 8 AM with top 5 items"
/>

// 2. On click, disclose ingredients
<RecipeDetail>
  <FrequencyPicker value="daily" />
  <TimePicker value="08:00" />
  <ItemCountSlider min={1} max={20} value={5} />
</RecipeDetail>

The card is the affordance. The detail panel is the disclosure. Never show the detail panel first.

When to Use

  • ✓Configurations with sensible defaults that cover most users.
  • ✓Workflows where the output is easier to evaluate than the input.
  • ✓Features that benefit from templating and sharing.
  • ✗Single-purpose actions with no meaningful defaults.
  • ✗Forms where every field is mandatory and unique per use.

Meridian note: This pattern powers our automation builder. Users pick a recipe, see the preview, then optionally tune the schedule and filters.