Astro.props

Astro.props holds the properties passed to a component from its parent.

Since Astro 1.0 Spec ↗

Syntax

const { title } = Astro.props

Returns

object — An object of the attributes passed to this component instance.

Examples

---
interface Props {
  title: string;
  level?: number;
}
const { title, level = 2 } = Astro.props;
const Tag = `h${level}`;
---
<Tag>{title}</Tag>
Output
Renders a heading element using the passed title, defaulting to an h2.

Notes

Available in .astro components and accessible to layouts via the frontmatter. Type it with an exported Props interface for editor and build-time safety. Slots are accessed via <slot /> rather than props.

See also