Dialog Multi-Step Wizard

​

Installation

npx shadcn@latest add @blocks/dialog-11

​

Dependencies

• button - shadcn/ui button component
• dialog - shadcn/ui dialog component
• label - shadcn/ui label component
• select - shadcn/ui select component
• separator - shadcn/ui separator component
• lucide-react - Icon library (AppWindowIcon)

​

Usage

import Dialog11 from "@/components/dialog-11";

export default function Page() {
  return <Dialog11 />;
}

​

Features

• Two-column layout - Sidebar for information, main area for form
• Multi-step design - Numbered steps with clear progression
• Responsive layout - Columns stack on mobile, side-by-side on desktop
• Information sidebar - Icon, description, and contextual help
• Step indicators - Numbered badges for each configuration step
• Multiple selects - Dropdowns for framework, package manager, linter, and testing tool
• Helper text - Additional context for complex options
• Sticky footer - Actions remain visible at bottom of sidebar
• Large dialog - Uses sm:max-w-2xl for wide layout
• Overflow handling - Uses overflow-visible for select dropdowns

​

Component Structure

• Dialog with controlled state
• DialogTrigger button
• DialogContent with:
  • overflow-visible for dropdowns
  • Custom padding (p-0)
  • Extra large width (sm:max-w-2xl)
  • No gap (gap-0)
• Bordered DialogHeader
• Form with two-column flex layout:
  • Left sidebar (md:w-80 md:border-r):
    • Icon and title section
    • Separator
    • Description sections
    • Info sections
    • Sticky footer with Cancel and Initialize buttons
  • Right content area (flex-1):
    • Step 1: Framework selection
    • Step 2: Package manager selection
    • Step 3: Linter/formatter selection with helper text
    • Step 4: Testing tool selection with helper text
• Each step includes:
  • Numbered badge indicator
  • Label
  • Select component with options
  • Optional helper text
• Responsive classes:
  • flex-col-reverse md:flex-row for layout direction
  • border-t md:border-none for conditional borders