Marek Miláček
6th week with astro

6th week with astro

Week 6: Core Components Deep Dive

November 17-23, 2025

This week I actually opened the components and tried to understand how they work. Picked 5 core ones (Header, Hero, Footer, Features, CallToAction) and documented everything.

Professional component patterns

Spent a lot of time analyzing the Header component. Realized how different it is from my Week 2 navigation:

My Week 2 nav: One array of links, ~30 lines of code, does basic navigation.

AstroWind Header: 7+ props, uses sub-components, handles sticky positioning, mobile menu, theme toggle, actions, ~150+ lines. Way more complex but also way more flexible.

The pattern is clear - professional components accept tons of configuration through props with sensible defaults, so they work out of the box but can be customized for any use case.

Props and slots

Hero component blew my mind - you can pass data as props OR as slots OR both:

<!-- Props only -->
<Hero title="My Title" />

<!-- Slots only -->
<Hero>
  <Fragment slot="title">
    My <strong>Title</strong>
  </Fragment>
</Hero>

Slots let you pass HTML/components, props are for simple data. Hero accepts both because sometimes you want styled content (slots) and sometimes just text (props).

Also learned about complex prop structures - arrays of objects, nested data:

links={[
  {
    title: 'Product',
    links: [
      { text: 'Features', href: '#' },
      { text: 'Pricing', href: '#' }
    ]
  }
]}

Footer uses this for organizing link groups. Makes sense once you see how it maps to the rendered output.

Tailwind CSS

Everything uses Tailwind utility classes instead of custom CSS. At first it looked like random gibberish:

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

But once you learn the system it’s actually faster:

  • max-w-7xl = max width
  • mx-auto = center horizontally
  • px-4 = horizontal padding
  • sm:px-6 = more padding on small+ screens
  • lg:px-8 = even more on large screens

Responsive design is just adding prefixes (sm:, md:, lg:). Dark mode too (dark:bg-gray-900). No media queries needed.

Still not sure I prefer it over scoped CSS, but I get why templates use it - consistency and speed.

Component customization

Customized the entire homepage with my own content:

  • Changed Hero messaging and CTAs
  • Wrote 6 features for Features component
  • Updated CallToAction with relevant text and links
  • Picked appropriate icons from Tabler Icons

Surprisingly straightforward once you understand the prop structure. Just replaced the data, kept the patterns.

Comparison to my work

Made a detailed comparison document. Key differences:

My components: Simple, single-purpose, ~30 lines each, hardcoded styling.

AstroWind components: Configurable, multi-purpose, 100+ lines, utility classes, handles edge cases, mobile responsive, dark mode support.

Tradeoff is complexity vs flexibility. For small projects my approach is fine. For anything professional, their patterns are better.

Documentation

Created analysis documents for each component:

  • All props listed with types and defaults
  • All slots identified and tested
  • Tailwind patterns documented
  • Usage examples
  • Code walkthrough

Took forever but now I actually understand how everything works instead of just copy-pasting.

What didn’t work

  • Initially confused by when to use props vs slots
  • Spent too long trying to understand every Tailwind class (you don’t need to)
  • Broke the Hero component twice by passing wrong prop types
  • My first customization attempt looked inconsistent across components - had to redo it thinking about the whole page
  • Documentation took way longer than expected (about 15 hours total)

What’s next

Week 7 is about Content Collections for blog posts. At least now I know how to read components.

Time invested: about 15 hours (documentation was a lot)