Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Astro) expand_more

Components

Astro component Component frontmatter Component props Default props Component slots Named slots HTML attributes Dynamic attributes Conditional rendering List rendering

Pages & Routing

src/pages routing Index page Dynamic route Rest parameters getStaticPaths 404 page Redirects Route priority Endpoint route Trailing slash

Layouts & Content

Layout component Nested layouts Content collections Collection schema getCollection getEntry Render content Markdown pages MDX integration Content images

Styling

Scoped styles Global styles CSS variables Class:list Sass integration Tailwind integration CSS modules Style props External stylesheet Critical CSS

Islands

Static component client:load client:idle client:visible client:media client:only Framework component Hydration boundary Sharing state Nano Stores

Data & Server

Top-level await Fetch at build time Astro.glob migration Astro.request Astro.url Cookies API Server actions Middleware API endpoint Environment variables

Rendering

Static output Server output Adapter configuration Prerender page On-demand rendering Streaming SSR Redirect response Headers Sessions View transitions

Performance & Testing

Image component Picture component Font optimization Prefetch Bundle client JavaScript Accessibility audit Component test End-to-end test Build analysis Deployment adapter

Astro / Components

Component props

Learn Component props in Astro with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Beginner

astro-003.astro

astro

---
interface Props { name:string; count?:number }
const {name,count=0}=Astro.props;
---
<h2>{name} ({count})</h2>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Component props Mastery Check →

Component frontmatter