Component Composition in Astro

Component composition is one of the most powerful patterns in modern web development. It allows you to build complex UIs from simple, reusable pieces.

What is Component Composition?

Component composition is the practice of building larger components by combining smaller, focused components. Instead of creating monolithic components, you create small, single-purpose components that work together.

Benefits

• Reusability: Write once, use everywhere
• Maintainability: Update one component, fix everywhere
• Testability: Test small components in isolation
• Flexibility: Mix and match components as needed

Example: Building a Card Component

Start with basic building blocks:

<!-- Button.astro -->
<button class="btn">
  <slot />
</button>

<!-- Badge.astro -->
<span class="badge">
  <slot />
</span>

Then compose them into larger components:

<!-- Card.astro -->
<div class="card">
  <div class="card-header">
    <Badge>{badgeText}</Badge>
    <h3>{title}</h3>
  </div>
  <div class="card-body">
    <slot />
  </div>
  <div class="card-footer">
    <Button href={ctaHref}>{ctaText}</Button>
  </div>
</div>

Slots for Flexibility

Astro’s slot system makes composition even more powerful:

<!-- FlexibleCard.astro -->
<div class="card">
  <slot name="header" />
  <slot />
  <slot name="footer" />
</div>

<!-- Usage -->
<FlexibleCard>
  <Fragment slot="header">
    <h2>Custom Header</h2>
  </Fragment>
  <p>Main content here</p>
  <Fragment slot="footer">
    <Button>Action</Button>
  </Fragment>
</FlexibleCard>

Best Practices

1. Single Responsibility: Each component should do one thing well
2. Props for Configuration: Use props to customize behavior
3. Slots for Content: Use slots for flexible content areas
4. Composition over Configuration: Prefer composing components over complex props

By following these patterns, you’ll build a library of reusable components that make building new features fast and enjoyable!