Neofi

Neofi is a modern, sleek template designed to streamline the creation of login and registration pages for websites built on the Astro Web Framework. Built to be server-first and and ensuring it's lightweight client-side, mobile-responsive, and fast-loading. The template provide a flexible foundation for developers to quickly implement secure, customizable authentication flows.

Neofi is currently in use on SudoVanilla projects such as Logment, Pebble Key, Ubikute Relay, and Scoutlyx.

Setup

Installation

Neofi is officially available only via the SudoVanilla Registry. So you’ll need to use the --registry parameter with your package manager.

For NPM, PNPM, Yarn, and Bun:

npm install @sudovanilla/neofi --registry https://js.registry.sudovanilla.org

For Deno, add the following to .npmrc in your Astro root directory:

registry="https://js.registry.sudovanilla.org"

Then run the deno install command.

You may noticed that all packages including astro are now being installed from the SudoVanilla Registry. This is because of the --registry parameter. No worries if the package, such as astro, is not available; the SudoVanilla Registry will act as a proxy to npmjs.org.

If you find Neofi anywhere but the SudoVanilla Registry, it is not official or controlled by SudoVanilla. Avoid unofficial sources. Also please report to SudoVanilla if an unofficial source is found.

Quick Setup

Assuming you already followed the installation instructions above, you will now able to easily integrate Neofi to your Astro website.

Create a new page for Neofi, for example let's create a registration page called register.astro, and import Neofi:

---
import { Neofi } from "@sudovanilla/neofi"
---

Neofi also comes with it's own Field component, which is optional, let's setup Neofi using the Field component:

---
import { Neofi, Field } from "@sudovanilla/neofi"
---
<Neofi
    Method="post"
    Action="#"
    Title="Register"
    TitleLink="/"
    Logo="https://via.sudovanilla.org/assets/branding/placeholders/logos/logoipsum-359.svg"
    Version="v2.3"
    VersionLink="https://releases.example.org/software/2.3"
    FooterLinks={[
        {
            Text: "Already have an account?",
            Url: "/login"
        }
    ]}
    SubmitButton="Create Account"
    OutsideFooterText={`By signing up, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.`}
>
    <Field
        Label="Username"
        Value="username"
        Type="text"
        Autocomplete="username"
        Placeholder="Zeek"
    />
    <Field
        Label="Email"
        Value="email"
        Type="email"
        Autocomplete="email"
        Placeholder="zeek2003@example.org"
    />
    <div class="neofi-grid">
        <Field
            Label="Password"
            Value="password"
            Type="password"
            Autocomplete="current-password"
        />
        <Field
            Label="Confirm Password"
            Value="password"
            Type="password"
            Autocomplete="current-password"
        />
    </div>
</Neofi>

You don't have to use the Field components at all, Neofi is built where you can use your own integrations and custom code.

Preview:

License

Copyright (C) 2025 - 2026 SudoVanilla

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see https://www.gnu.org/licenses/.