Props

In React, props arrive as the first argument of the component function. In Astro, props arrive via the global Astro.props object, which you destructure in the frontmatter — the same destructuring syntax you already know.

Receiving props

// Button.jsx
export default function Button({ label, variant = "primary" }) {
  return (
    <button className={`btn btn--${variant}`}>
      {label}
    </button>
  );
}

// Usage:
// <Button label="Save" />
// <Button label="Delete" variant="danger" />

---
// Button.astro
const { label, variant = "primary" } = Astro.props;
---
<button class={`btn btn--${variant}`}>
  {label}
</button>

<!-- Usage:
<Button label="Save" />
<Button label="Delete" variant="danger" />
-->

Two things to notice:

Astro.props is the Astro equivalent of the React props object — destructure from it exactly as you would from a function parameter.
Default values work with standard JavaScript destructuring defaults (= "primary").

TypeScript: interface Props

Astro components support TypeScript natively. Declare an interface Props (or type Props) in the frontmatter and the compiler enforces it at build time.

// Card.tsx
interface Props {
  title: string;
  description?: string;
  href: string;
}

export default function Card({ title, description = "", href }: Props) {
  return (
    <a href={href} className="card">
      <h2>{title}</h2>
      {description && <p>{description}</p>}
    </a>
  );
}

---
// Card.astro
interface Props {
  title: string;
  description?: string;
  href: string;
}

const { title, description = "", href } = Astro.props;
---
<a href={href} class="card">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</a>

The interface Props declaration is the idiomatic Astro pattern. Astro’s language server reads it to power editor autocomplete when you use the component.

Runnable example

Astro

---
interface Props {
  name: string;
  role?: string;
  color?: string;
}

const { name, role = "Developer", color = "#6366f1" } = Astro.props;
---
<html lang="en">
  <head><meta charset="utf-8" /><title>Props demo</title></head>
  <body style="font-family:sans-serif;padding:2rem">
    <div style={`border-left:4px solid ${color};padding-left:1rem`}>
      <h1>{name}</h1>
      <p style="color:#888">{role}</p>
    </div>
  </body>
</html>