DEV Community: Tyler Warnock

Why I Love Building Userfront

Tyler Warnock — Thu, 27 Jun 2024 23:01:16 +0000

Hi, I’m Tyler. I’m the founding CEO at Userfront, and I want to share why I’m here and why I love working on Userfront every day.

My cofounder Damion and I have each been writing software for over a decade; in my case it’s about 20 years. My software background started with missile defense research for DARPA, where I wrote code to control hardware in supersonic dynamic systems, and then robotics at Stanford, where I focused on building novel medical devices.

My old wind tunnel setup

When I started writing software specifically for the internet and startups in 2012, I found all the “extra stuff” to be a nuisance. User administration, password resets, file uploads, email sending… why can’t I just build my app? I was on Ruby on Rails at the time, and the gem plugin ecosystem (as narrated by Ryan Bates at RailsCasts) is the only reason I was able to build anything useful at all.

Still, I stuck with it, and as I became more sophisticated, I noticed patterns emerging. My first approach to handling all the “extra stuff” was to pick a basic solution and move on. This works great because extra features are YAGNI (”You Aren’t Gonna Need It”), and moving quickly at the beginning matters a lot. But I also learned that this strategy is painful for certain foundational systems, particularly databases and auth. Both are hard to change once you have them in place, so you really want to make sure that whatever you choose will have what you need later, even if you don’t need it right now. For these foundational systems, it’s less “You Aren’t Gonna Need It” and more “You Will Need It - Just Not Right Now” (YWNI-JNRN™).

For databases, I came to love Postgres, and at this point you’ll have a tough time convincing me to start with something else. Auth on the other hand… there were always pros and cons and opinions and tradeoffs. Damion & I never found something that really nailed it and fit the bill for a growing software company. Simple plugins make it easy to get started, but simple plugins don’t model intermediate or advanced needs. If you start with individual user accounts and later need to serve team accounts, you’re going to have a bad time. If you start with freemium customers and later want to serve enterprise customers, you’re going to have a bad time. If you start with session tokens and later need to scale horizontally, you guessed it… you’re going to have a bad time.

It seems like the instant you get off of the happy path for auth, everything jumps straight from “this takes 7 seconds to set up” to “read our PhD-level Zanzibar whitepaper”. Either you’re doing the basics, no problem, or you need to be a master artisan.

In other words, auth is like the meme for drawing an owl:

And this is why I love working on Userfront: we’re drawing the auth owl for thousands of software companies. I love helping people solve their growing pains because it feels like paying it forward. I’ve found that almost everyone wants to build things that make the world better, and we get to help them do that. Every important transaction and every piece of data relies on auth, and we get to help software companies spend less time figuring it out as they go. We get to help software companies succeed.

Didn't want to bother support, but wanted to give you guys some feedback — you guys are rockstars and my developers love working with your product and you are amazing at support requests as well. Cheers!

Kunal Shah, Co-Founder and Managing Director, Accelerate BSi

At this point, I’ve spoken with almost 1,000 software companies about their auth needs, and I’ve seen every configuration you can imagine. These are the things that I believe matter most for companies and developers:

Auth wishlist

Should Have	Should Not Have
Fast and free to get started, no credit card required	Complex mental model with lots of diagrams
Flexible architecture to handle all types of customers (freemium, organizations, enterprise)	Vendor lock-in and squeeze
Amazing docs	Circular docs
Secure and compliant by default	Security footguns, or compliance as an afterthought

This list is what we’re building at Userfront, and I love being a part of it. We have a thoughtful, world-class team who have built complicated systems and who care about getting it right. We sweat the details of the auth owl together so that software companies don’t have to. In doing so, we’ve built something rock solid that our customers rave about.

It feels amazing to create something that moves the needle for people in such a concrete way. We love celebrating with companies when they win a big new customer, or when we enable a feature that levels up their product. We love building a solid tool that companies don’t have to rip and replace in a year, and we love giving people a roadmap of what’s coming next on their journey.

At the end of the day, we’re all trying to build something great, and I love that Userfront is helping software companies do just that.

Learn more about Userfront on our website.

React authentication, simplified

Tyler Warnock — Mon, 03 May 2021 17:46:23 +0000

Authentication is one of those things that just always seems to take a lot more effort than we want it to.

To set up auth, you have to re-research topics you haven’t thought about since the last time you did authentication, and the fast-paced nature of the space means things have often changed in the meantime. New threats, new options, and new updates may have kept you guessing and digging through docs in your past projects.

In this article, we lay out a different approach to authentication (plus access control & SSO) in React applications. Rather than add a static library that you have to keep up to date or re-research each time you want to implement auth, we’ll use a service that stays up to date automatically and is a much simpler alternative to Auth0, Okta, and others.

React authentication

We typically use a similar approach when writing authentication in React: our React app makes a request to our authentication server, which then returns an access token. That token is saved in the browser and can be used in subsequent requests to your server (or other servers, if needed). Whether writing standard email & password authentication or using magic links or single sign on (SSO) logins like Google, Azure, or Facebook, we want our React app to send an initial request to an authentication server and have that server handle all the complexity of generating a token.

So React’s responsibility in authentication is to:

Send the initial request to the authentication server
Receive and store the access token
Send the access token to your server with each subsequent request

JWT access tokens

JSON Web Tokens (JWTs) are compact, URL-safe tokens that can be used for authentication and access control in React applications. Each JWT has a simple JSON-object as its “payload” and is signed such that your server can verify that the payload is authentic. An example JWT would look like:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9.f7iKN-xi24qrQ5NQtOe0jiriotT-rve3ru6sskbQXnA

The payload for this token is the middle section (separated by periods):

eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9

The JWT payload can be decoded from base64 to yield the JSON object:

JSON.parse(atob("eyJ1c2VySWQiOjEsImF1dGhvcml6YXRpb24iOiJhZG1pbiJ9"));

// =>
{
  “userId”: 1,
  “authorization”: “admin”
}

It’s important to note that this payload is readable by anyone with the JWT, including your React application or a third party.

Anyone that has the JWT can read its contents. However, only the authentication server can generate valid JWTs -- your React application, your application server, or a malicious third party cannot generate valid JWTs. So in addition to reading the JWT, your server also needs to verify the JWT as authentic by checking it against a public key. This allows your application server to verify incoming JWTs and reject any tokens that were not created by the authentication server or that have expired.

The flow for using a JWT in a React application looks like this:

Your React app requests a JWT whenever the user wants to sign on.
The authentication server generates a JWT using a private key and then sends the JWT back to your React app.
Your React app stores this JWT and sends it to your application server whenever your user needs to make a request.
Your application server verifies the JWT using a public key and then read the payload to determine which user is making the request.

Each of these steps is simple to write down, but each step has its own pitfalls when you actually want to implement it and keep it secure. Especially over time, as new threat vectors emerge and new platforms need to be patched or supported, the security overhead can add up quickly.

Userfront removes auth complexity in React apps

Userfront is a framework that abstracts away auth complexity. This makes it much easier for you to work with authentication in a React application and, perhaps most importantly, keeps all the auth protocols updated for you automatically over time.

The underlying philosophy with Userfront is that world-class auth should not take effort – it should be easy to set up, and security updates should happen for you automatically. Userfront has all the bells and whistles of authentication, Single Sign On (SSO), access control, and multi-tenancy, with a production-ready free tier up to 10,000 monthly active users. For most modern React applications, it’s a great solution.

Setting up authentication in React

Now we will go through building all the main aspects of authentication in a React application. The final code for this example is available here.

Use your favorite boilerplate to set up your React application and get your build pipeline in order. In this article, we’ll use Create React App, which does a lot of the setup work for us, and we’ll also add React Router for our client-side routing. Start by installing Create React App and React Router:

npx create-react-app my-app
cd my-app
npm install react-router-dom --save
npm start

Now our React application is available at http://localhost:3000

Just like it says, we can now edit the src/App.js file to start working.

Replace the contents of src/App.js with the following, based on the React Router quickstart:

// src/App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/reset">Reset</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/reset">
            <PasswordReset />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

function PasswordReset() {
  return <h2>Password Reset</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

Now we have a very simple app with routing:

Route	Description
`/`	Home page
`/login`	Login page
`/reset`	Password reset page
`/dashboard`	User dashboard, for logged in users only

This is all the structure we need to start adding authentication.

Signup, login, and password reset with Userfront

First, create a Userfront account at https://userfront.com. This will give you a signup form, login form, and password reset form you can use for the next steps.

In the Toolkit section of your Userfront dashboard, you can find the instructions for installing your signup form:

Follow the instructions by installing the Userfront react package with:

npm install @userfront/react --save
npm start

Then add the form to your home page by importing and initializing Userfront, and then updating the Home() function to render the form.

// src/App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Userfront from "@userfront/react";

Userfront.init("demo1234");

const SignupForm = Userfront.build({
  toolId: "nkmbbm",
});

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/reset">Reset</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/reset">
            <PasswordReset />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <SignupForm />
    </div>
  );
}

function Login() {
  return <h2>Login</h2>;
}

function PasswordReset() {
  return <h2>Password Reset</h2>;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

Now the home page has your signup form. Try signing up a user:

The form is in "Test mode" by default, which will create user records in a test environment you can view separately in your Userfront dashboard:

Continue by adding your login and password reset forms in the same way that you added your signup form:

// src/App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Userfront from "@userfront/react";

Userfront.init("demo1234");

const SignupForm = Userfront.build({
  toolId: "nkmbbm",
});
const LoginForm = Userfront.build({
  toolId: "alnkkd",
});
const PasswordResetForm = Userfront.build({
  toolId: "dkbmmo",
});

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/reset">Reset</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/reset">
            <PasswordReset />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <SignupForm />
    </div>
  );
}

function Login() {
  return (
    <div>
      <h2>Login</h2>
      <LoginForm />
    </div>
  );
}

function PasswordReset() {
  return (
    <div>
      <h2>Password Reset</h2>
      <PasswordResetForm />
    </div>
  );
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

At this point, your signup, login, and password reset should all be functional.

Your users can sign up, log in, and reset their password.

Protected route in React

Usually, we don't want users to be able to view the dashboard unless they are logged in. This is known as protecting a route.

Whenever a user is not logged in but tries to visit /dashboard, we can redirect them to the login screen.

We can accomplish this by updating the Dashboard component in src/App.js to handle the conditional logic.

When a user is logged in with Userfront, they will have an access token available as Userfront.accessToken(). We can check for this token to determine if the user is logged in.

Add the Redirect component to the import statement for React Router, and then update the Dashboard component to redirect if no access token is present.

// src/App.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect, // Be sure to add this import
} from "react-router-dom";

// ...

function Dashboard() {
  function renderFn({ location }) {
    // If the user is not logged in, redirect to login
    if (!Userfront.accessToken()) {
      return (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: location },
          }}
        />
      );
    }

    // If the user is logged in, show the dashboard
    const userData = JSON.stringify(Userfront.user, null, 2);
    return (
      <div>
        <h2>Dashboard</h2>
        <pre>{userData}</pre>
        <button onClick={Userfront.logout}>Logout</button>
      </div>
    );
  }

  return <Route render={renderFn} />;
}

Notice also that we've added a logout button by calling Userfront.logout() directly:

<button onClick={Userfront.logout}>Logout</button>

Now, when a user is logged in, they can view the dashboard. If the user is not logged in, they will be redirected to the login page.

React authentication with an API

You will probably want to retrieve user-specific information from your backend. In order to protect these API endpoints, your server should check that incoming JWTs are valid.

There are many libraries to read and verify JWTs across various languages; here are a few popular libraries for handling JWTs:


Node.js	.NET	Python	Java

For Userfront, the access token is available in your React application as Userfront.accessToken().

Your React application can send this as a Bearer token inside the Authorization header. For example:

// Example of calling an endpoint with a JWT

async function getInfo() {
  const res = await window.fetch("/your-endpoint", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${Userfront.accessToken()}`,
    },
  });

  console.log(res);
}

getInfo();

To handle a request like this, your backend should read the JWT from the Authorization header and verify that it is valid using the public key found in your Userfront dashboard.

Here is an example of Node.js middleware to read and verify the JWT:

// Node.js example (Express.js)

const jwt = require("jsonwebtoken");

function authenticateToken(req, res, next) {
  // Read the JWT access token from the request header
  const authHeader = req.headers["authorization"];
  const token = authHeader && authHeader.split(" ")[1];
  if (token == null) return res.sendStatus(401); // Return 401 if no token

  // Verify the token using the Userfront public key
  jwt.verify(token, process.env.USERFRONT_PUBLIC_KEY, (err, auth) => {
    if (err) return res.sendStatus(403); // Return 403 if there is an error verifying
    req.auth = auth;
    next();
  });
}

Using this approach, any invalid or missing tokens would be rejected by your server. You can also reference the contents of the token later in the route handlers using the req.auth object:

console.log(req.auth);

// =>
{
  mode: 'test',
  tenantId: 'demo1234',
  userId: 1,
  userUuid: 'ab53dbdc-bb1a-4d4d-9edf-683a6ca3f609',
  isConfirmed: false,
  authorization: {
    demo1234: {
      tenantId: 'demo1234',
      name: 'Demo project',
      roles: ["admin"],
      permissions: []
    },
  },
  sessionId: '35d0bf4a-912c-4429-9886-cd65a4844a4f',
  iat: 1614114057,
  exp: 1616706057
}

With this information, you can perform further checks as desired, or use the userId or userUuid to look up user information to return.

For example, if you wanted to limit a route to admin users, you could check against the authorization object from the verified access token:

// Node.js example (Express.js)

app.get("/users", (req, res) => {
  const authorization = req.auth.authorization["demo1234"] || {};

  if (authorization.roles.includes("admin")) {
    // Allow access
  } else {
    // Deny access
  }
});

React SSO (Single Sign On)

From here, you can add social identity providers like Google, Facebook, and LinkedIn to your React application, or business identity providers like Azure AD, Office365, and more.

You do this by creating an application with the identity provider (e.g. Google), and then adding that application's credentials to the Userfront dashboard. The result is a modified sign on experience:

No additional code is needed to implement Single Sign On using this approach: you can add and remove providers without updating your forms or the way you handle JWTs.

Final notes

Adding authentication and access control to your React application doesn't have to be a hassle. Both the setup step and, more importantly, the maintenance over time, are handled with modern platforms like Userfront.

JSON Web Tokens allow you to cleanly separate your auth token generation layer from the rest of your application, making it easier to reason about and more modular for future needs. This architecture also allows you to focus your efforts on your core application, where you are likely to create much more value for yourself or your clients.

For more details on adding auth to your React application, visit the Userfront guide, which covers everything from setting up your auth forms to API documentation, example repositories, working with different languages and frameworks, and more.

Create a free Userfront project

Introspect navbar, Visualize hero | Module Monday 76

Tyler Warnock — Mon, 16 Mar 2020 22:34:16 +0000

Mods for any site

Mods are open source and can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Introspect navbar

Easy-to-add responsive navbar that you can use and reuse.
View mod

Visualize hero section

Gradient background intro section with links and image.
View mod

Twitter follow button

The official Twitter follow button, but even easier to use.
View mod

Hugrid gallery

A grid-based image gallery. Add to your site and upload your images easily.
View mod

Bokeh background

Pre-styled card with swirling bokeh blobs.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Spectral intro, Solid state cards | Module Monday 75

Tyler Warnock — Tue, 03 Mar 2020 00:00:39 +0000

Open source modules

Mods can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Spectral intro

Animated parallax intro section based on the Spectral theme.
View mod

Solid state cards

Dark card section with calls to action and responsiveness built in.
View mod

Image underlay text

Add a bold headline with any image underneath it.
View mod

Map with marker

Put your location on the map anywhere on your site in under 5 minutes.
View mod

Prism form

Work automatically with no backend required, and displays your other contact into too.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Auto form, Phantom menu | Module Monday 74

Tyler Warnock — Mon, 24 Feb 2020 22:27:14 +0000

Open source mods

Mods are modules that can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Auto form

Form with your contact information that works automatically. No backend required.
View mod

Phantom menu

Slide in menu based on the open source Phantom theme by Templated.
View mod

Feature display

Showcase product features with this pre-styled block.
View mod

Image cards

Easy to use cards to quickly and professionally highlight your work.
View mod

Simple headline

A basic block of text that anyone on your team can edit without pushing code.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Alternating spotlights, Team directory | Module Monday 73

Tyler Warnock — Mon, 17 Feb 2020 22:21:00 +0000

Open source mods

You can use these mods (modules) on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Alternating spotlights

Spotlight content sections with responsiveness built in.
View mod

Team directory

Keep your team page up to date without pushing new code every time.
View mod

Fade in intro

Text and button fade followed by background.
View mod

Live countdown

Add your date for an instant countdown.
View mod

Icon cards

Showcase your value propositions with simple icons.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Animated blocks, Swipeable gallery | Module Monday 72

Tyler Warnock — Mon, 10 Feb 2020 23:39:24 +0000

Open source modules

Mods are modules that can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Animated block cards

Full width cards that fade into focus when scrolled.
View mod

Swipeable gallery

Image gallery that works great on desktop or mobile.
View mod

Spatial hero

Themed intro section with prominent call to action button.
View mod

Dual section highlights

Show off 2 cards and 2 actions.
View mod

Dismissable message

Based on Bulma, this message does exactly what you want: gets out of the way once read.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Colorful main section, Fade in animation | Module Monday 71

Tyler Warnock — Mon, 27 Jan 2020 22:20:26 +0000

Open source mods

Mods are modules that can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Phantom main

A main content section based on the Phantom theme.
View mod

Fade in hero section

Fades and translates into place when the page loads.
View mod

Overlay traveler

A circular overlay that elegantly moves out of the way when closed.
View mod

Fractal theme footer

A subtle reusable footer based on the Fractal theme.
View mod

Responsive call to action (CTA)

Image underlay with buttons that look great at any angle.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Reusable navbar, Animated headline | Module Monday 70

Tyler Warnock — Mon, 20 Jan 2020 22:47:20 +0000

Open source modules

Mods can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Reusable nav

Navbar for all widths that's easy to clone and reuse.
View mod

Details section

Pre-styled content section for informing your visitors.
View mod

Animated header

Preset animation -- just add content.
View mod

Colorful gallery

Showcase project sections or a portfolio.
View mod

Timeline carousel

Add events to a timeline with this slick slider.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Contact form, Portfolio gallery, Prism intro | Module Monday 69

Tyler Warnock — Mon, 13 Jan 2020 22:28:16 +0000

Open source modules

Mods can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Contact form

Embed a contact form anywhere that will email you automatically.
View mod

Portfolio gallery

Showcase your portfolio of work with hover images and links.
View mod

Prism hero banner

A pre-styled page header based on the Prism theme.
View mod

Spatial side navbar

Slide out menu to reuse across pages and projects.
View mod

Call to Action button

A nicely styled button to help drive user actions.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Scrollspy, Alternate cards, Learn more | Module Monday 68

Tyler Warnock — Mon, 06 Jan 2020 21:56:52 +0000

Open source modules

Mods can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Scrollspy

These header links automatically highlight when you scroll or click.
View mod

Alternating content sections

Add content that automatically alternates for a professional looks.
View mod

Animated button

Expands on hover for a nice effect.
View mod

Hover cards

Slight zoom when you hover over these card image links.
View mod

Dark footer

Reuseable footer with social linmks.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️

Hyperspace form, Icon features | Module Monday 67

Tyler Warnock — Mon, 16 Dec 2019 21:47:27 +0000

Easy to add modules (mods)

Mods can be used on any website, web app, or anywhere else. There are hundreds more like these built & shared on AnyMod.

Click a mod to see it along with its source code.

Hyperspace form

Bold contact form based on the Hyperspace theme from Templated.
View mod

Feature grid with icons

Space to list info about your project. Pre-styled and responsive.
View mod

Story gallery

Scrolling image carousel with overlay links.
View mod

Content circles

Informative section with circular images.
View mod

Simple announcement

Basic editable banner with subtle icons.
View mod

I post new mods from the community here every (Module) Monday -- I hope you find them useful!

Happy coding ✌️