Components, props, and import resolution

Connect props to a component#

Create src/components/Callout.astro:

---
interface Props {
  title: string;
  kind?: 'note' | 'warning';
}
const { title, kind = 'note' } = Astro.props;
---
<aside class:list={['callout', kind]}>
  <h2>{title}</h2>
  <slot />
</aside>

Import and use it from a page:

---
import Callout from '../components/Callout.astro';
---
<Callout title="Before you deploy" kind="warning">
  <p>Check the preview build.</p>
</Callout>

Invoke completion on the component name, prop names, and supported values. Use Go to Declaration on the import/component to inspect which file is resolved. Prop diagnostics become easier to interpret when the imported component and its Props interface are both correct.

Resolve aliases and packages#

The plugin resolves supported TypeScript path aliases and package exports. If @components/Callout.astro does not navigate, inspect tsconfig.json, its inherited configuration, and the target file. An alias must be configured in the project; the spelling alone creates no mapping.

Package components also require installed dependencies. Check a package’s exports before replacing its public import path with an internal file path.

Understand the language boundary#

Astro frontmatter, template expressions, HTML, and embedded style/script regions have different analysis needs. Native Astro features and optional language-server-backed TypeScript features work together; install/configure the required LSP4IJ integration when using the latter.

Use Settings → Tools → Astro Pro for plugin configuration. If a problem affects TypeScript but .astro navigation works, inspect the language-server setup separately from file recognition and component resolution.