How to Write UI Components That Stay Flexible

Table of Contents TLDR A Dialog is a great test case for compound components because every product needs three or four versions of one: confirm, edit, share, settings. The naive paths both fail: copy a monolithic dialog into every variant and the shells drift; collapse them into one god component and the props turn into mode, showHeader, showCancel, confirmVariant, headerCentered. The compound pattern Reka UI uses (and shadcn-vue ships) puts state into a provide / inject context and exposes small primitives (<Dialog>, <DialogTrigger>, <DialogContent>, <DialogHeader>, <DialogFooter>, <DialogClose>) that the consumer arranges into the variant they need. The tree expresses the variant; nothing inside the component branches on flags. This post grew out of Fernando Rojo’s talk Composition Is All You Need. Watch it first if you have 30 minutes. This post is the Vue translation, with Dialog as the running example. The whole pattern fits in one snippet: the tree shape is the variant…