Skip to main content

Back to home

Linkfolio documentation

Linkfolio is a self-hosted, open-source link-in-bio page — a Linktree alternative built with Next.js and Tailwind CSS. It gives you one fast, accessible page linking every part of your online presence, on your own domain.

Deploy the template

Clone the repository and deploy it to Vercel, then edit config/user.config.ts to set your name, avatar and links. The same file also takes a theme and darkTheme object for programmatic colour and motion overrides, and a themeColor string for the browser chrome colour.

Set layout: "bento" in the same file to swap the wrapping rows for a mosaic grid. Tile sizes come from the group each link already declares — project takes a large tile, website a wide one and everything else a small square, so no link needs annotating. Any link can override that with its own span — "2x2", "1x2" and so on, read as columns x rows — and a direction of "horizontal" to set its image beside the text instead of above it. Try both on the demo page.

Add it to an existing project

Install the package and render the component with your own config:

npm install linkfolio
pnpm add linkfolio
yarn add linkfolio
import { LinkFolio } from "linkfolio";

export default function Page() {
  return <LinkFolio userConfig={userConfig} />;
}

LinkFolio also accepts renderJsonLd, renderChrome and headingLevel props for embedding it on a page that already has its own heading or structured data, and server components can build the same metadata and JSON-LD by importing from linkfolio/seo instead of linkfolio. The full configuration reference lives in the project README.

Analytics

Linkfolio loads no analytics by default. Name a provider and it loads that tag — ga, gtm, plausible, umami and beam ship built in, and registerAnalyticsAdapter takes any other. All but beam also report which link each visitor clicked; Beam's event API takes a path rather than a named event, so it records page views only.

analytics: {
  provider: "plausible",
  id: "example.com",
}

With no provider configured at all, each card still dispatches a linkfolio:analytics event on document carrying the link's title, URL and group — enough to wire up any tracker yourself. The full reference lives in the project README.

Frequently asked questions

Is Linkfolio free?
Yes. Linkfolio is open source under the MIT licence. You host it yourself, so there is no subscription and no usage limit.
How is it different from Linktree?
Linkfolio runs on your own domain and infrastructure. You have full access to the source, can inject your own React components, and no third party sits between you and your visitors.
Do I need to know Next.js to use it?
No. You can deploy the template to Vercel in one click and personalise it by editing a single configuration file. Knowing Next.js helps if you want to customise components.
Can I add it to an existing Next.js project?
Yes. Install the linkfolio package and render the LinkFolio component with your own config object.
Can I use Google Analytics with Linkfolio?
Yes, and it is not the only option. Set analytics: { provider: "ga", id: "G-…" } in your config and Linkfolio loads the tag and reports which link each visitor clicked. Google Tag Manager, Plausible, Umami and Beam ship as built-in providers too, you can register your own, and every link card emits a linkfolio:analytics DOM event you can listen to without configuring any provider at all.

Back to the demo

On this page
  • Deploy the template
  • Add to an existing project
  • Analytics
  • FAQ