Nov 25, 2022

Astro components for Netlify features

This morning, I released the first version of astro-netlify-components,a library of Astro components for Netlify. I was about to start dogfooding the functionality in my own site, and I figured I might as well share it with the world.

There are two exported component at launch:

• <Form>: adds all the of the markup for Netlify Forms with types and validation
• <CMS>: a full-page component to render the Netlify CMS admin interface

To add either component to your, add the package to your project:

npm i astro-netlify-components

Then, import the components and use in your Astro page:

---
import CMS from "astro-netlify-components/CMS.astro";
import Form from "astro-netlify-components/Form.astro";
---

CMS renders a full page, so import and invoke it on a page of its own:

---
// src/pages/admin.astro
import CMS from "astro-netlify-components/CMS.astro";
---

<CMS />

Form expects children, so you could set up a contact form on your site like this:

---
// src/pages/contact.astro
import Form from "astro-netlify-components/Form.astro";
---

<Form name="contact">
  <label>
    <b>Name</b>
    <input type="text" name="name" required />
  </label>
  <label>
    <b>Email</b>
    <input type="email" name="email" required />
  </label>
  <label>
    <b>Message</b>
    <textarea name="message" required></textarea>
  </label>
  <button>Submit</button>
</Form>

---

If you want to give it a try, make sure to checkout the documentation and file any issues you encounter.

Happy coding!

---