Add custom components

You can also add your own components. HTML, Astro, and React components are all supported. Use Tailwind CSS to style your components (Tailwind CSS is not mandatory but highly recommended). Refer to the Astro and Tailwind CSS documentation to learn more about creating custom components.

Note

LightNet might not use the latest major version of Tailwind CSS, Astro, or React. We follow those projects with some delay to make sure we do not break things. Watch the LightNet release notes on when to update them.

Here is an example of custom HTML styled with Tailwind CSS:

---
import { Page, Section } from "lightnet/components"

const { t } = Astro.locals.i18n
---
<Page>
    <Section className="flex flex-col items-center bg-gray-900 py-10 text-gray-50">
        <h2 class="text-3xl font-bold">{t("some.title")}</h2>
        <p class="text-lg">{t("some.description")}</p>
    </Section>
</Page>

This example adds a section with a dark background and white text. It centers the text horizontally.

Share with the community

You are welcome to share your custom components with the community. Start a conversation with us by opening a feature proposal.