Components

          
            ## Astro Components Guidelines

1.  Definition:

    - Basic building blocks of Astro projects, using the `.astro` file extension.
    - Primarily HTML templating components.
    - No client-side runtime by default: Render to HTML during build (static) or on request (SSR).

2.  Structure: `.astro` files have two parts:

    - Component Script: Enclosed in code fences (`---`). Contains JavaScript/TypeScript that runs only on the server/at build time. Used for imports, fetching data, defining variables, etc. This code is _not_ sent to the client.
    - Component Template: Standard HTML markup outside the code fences. Can include JavaScript expressions (e.g., `{variable}`, `<MyComponent prop={value} />`), Astro directives, and other components. Defines the HTML output.

3.  Props: Pass data from parent to child components.

    - Define props on the child component using `Astro.props`.
    - Use TypeScript `interface Props { ... }` within the script for type-checking.
    - Destructure props: `const { name, count = 0 } = Astro.props;`
    - Pass props as attributes when using the component: `<Greeting name="World" count={5} />`.
    - Attribute names are typically camelCase in the interface/script (e.g., `isActive`) and kebab-case when passed (e.g., `is-active={true}`), though Astro handles various casings.

4.  Slots (`<slot />`): Allow passing HTML content _into_ a component (children).

    - Default Slot: A single `<slot />` renders any child elements passed to the component that don't have a `slot` attribute.
    - Named Slots: Use `<slot name="my-name" />` in the component template. Pass content to it using the `slot="my-name"` attribute on the child element(s) in the parent.
      - Use `<Fragment slot="my-name">...</Fragment>` to pass multiple elements to a named slot without a wrapping `<div>`.
    - Fallback Content: Content placed inside the `<slot>` tag (`<slot>Default text</slot>`) is rendered _only_ if no matching children are passed for that slot.
    - Transferring Slots: Pass slots received by a component down to another component it uses. Use `<slot name="received-name" slot="target-name" />` for named slots or `<slot />` for the default slot.

5.  Interactivity:

    - For client-side JavaScript, use standard HTML `<script>` tags (potentially with `is:inline`) or import UI Framework Components (React, Vue, Svelte, etc.) which become Astro Islands.

6.  `.html` Components:
    - Can be imported and used like `.astro` files.
    - Contain only valid HTML; no frontmatter, server-side imports, or dynamic expressions.
    - `<script>` tags are treated as `is:inline` (not processed/bundled by Vite).
    - Assets referenced must be in the `public/` folder.
    - `<slot>` elements work similarly unless marked `is:inline`.

Reference: [Astro Components Docs](mdc:https:/docs.astro.build/en/basics/astro-components)