Add Custom Components

You can also add your own components. All HTML, Astro and React components are 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 how to create custom components.

Note

LightNet might not be using the latest major version of Tailwind CSS, Astro, 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 on adding custom html styled by 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("x.some.title")}</h2>
        <p class="text-lg">{t("x.some.description")}</p>
    </Section>
</Page>

This example adds a section with a dark background and a white text color. 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.