# Linkfolio

> A self-hosted, open-source link-in-bio page built with Next.js and Tailwind CSS.

Linkfolio is a customizable link-in-bio page that deploys as a standalone template or installs as a package into an existing Next.js project. You host it yourself: there is no account, no subscription, and no third party between you and your visitors.

## Key Features

- Built with Next.js (App Router) and Tailwind CSS v4
- Fully responsive design for all devices
- Customizable components (profile, social links, footer)
- Typewriter effect on alias text (optional)
- Animated card entrance with intersection observer
- Accessible (WCAG AA): keyboard navigation, screen reader support, reduced motion support
- SEO: Open Graph, Twitter Cards, schema.org @graph structured data (ProfilePage, Person, ItemList, WebSite), canonical URLs, dynamic sitemap
- Deployable to Vercel with one click
- Public configuration API at /api/config

## Getting Started

Clone the template and deploy directly to Vercel, or fork the repository.

## Usage

```jsx
import { LinkFolio } from "@/index";

const userConfig = {
  avatarSrc: "/assets/avatar.webp",
  avatarAlt: "Avatar",
  fullName: "Your Name",
  alias: "@your_alias",
  metaTitle: "My Links",
  metaDescription: "All my online links in one place",
  socialNetworks: [
    {
      url: "https://github.com/username",
      iconSrc: githubIcon,
      title: "GitHub",
      description: "Open-source contributions",
    },
  ],
};

function MyPage() {
  return <LinkFolio userConfig={userConfig} />;
}
```

## Configuration Options

- `avatarSrc`: Path or import for profile image
- `avatarAlt`: Alt text for profile image
- `fullName`: Display name
- `alias`: Username or tagline
- `metaTitle`: Page title for SEO
- `metaDescription`: Page description for SEO
- `themeColor`: Theme color for browser chrome
- `enableTypingAlias`: Enable typewriter animation on alias (boolean)
- `socialNetworks`: Array of social link objects with url, iconSrc, title, description, hidden, and group fields
- `siteUrl`: Canonical origin. Anchors `metadataBase`, the canonical URL, `og:url`, and every structured-data `@id` (Person, ProfilePage, ItemList, WebSite). Omitting it degrades the entity graph — image and url fields are dropped and `@id`s fall back to bare fragments instead of resolvable URLs.
- `jobTitle`: Person job title in structured data
- `worksFor`: Person employer name in structured data
- `lang`: HTML lang attribute (default "en")
- `locale`: Open Graph locale (default "en_US")
- `keywords`: Array of meta keywords

## Customization

Custom components can be injected via props: `UserProfileComponent`, `BeforeSocialLinksComponent`, `SocialLinksComponent`, `AfterSocialLinksComponent`, `FooterComponent`.

`LinkFolio` also accepts behavioural props for embedding it inside a page that already has its own document structure:

- `renderJsonLd` (boolean, default true): renders the component's own `ProfilePage` + `Person` JSON-LD. Set false to avoid a duplicate `Person` entity when the host page already publishes structured data.
- `renderChrome` (boolean, default true): renders the QrCodeButton/ShareButton/ThemeToggle row. Set false when the host page has its own theme toggle.
- `headingLevel` ("h1" | "h2", default "h1"): heading level for the full name. Set "h2" when the host page already has its own `<h1>`.

Theme colors are customizable via CSS variables in globals.css:

- `--color-primary`
- `--color-secondary`
- `--color-background-start`
- `--color-background-end`

Full theming (colors and motion tokens) can also be set programmatically via the `theme` and `darkTheme` config keys, each a `ThemeColors` object of the same CSS custom properties.

## SEO helpers (`linkfolio/seo`)

`buildMetadata(config, options?)` and `buildJsonLd(config, siteUrl?)` build the same Next.js `Metadata` object and JSON-LD graph that `<LinkFolio />` generates internally. Import them from the `linkfolio/seo` subpath, not from `linkfolio`: the root `linkfolio` entry is a `"use client"` module, so importing these from `linkfolio` and calling them in a server component (e.g. `generateMetadata`) throws. `linkfolio/seo` has no client-side dependencies.

```javascript
import { buildMetadata, buildJsonLd } from "linkfolio/seo";
```

## How Linkfolio compares

- Cost — Linkfolio: Free, MIT licensed; Linktree: Free tier; paid from €4.50/mo billed annually; LinkStack: Free and open source; hosted from $1/mo; Bio.link: One plan at $7.49/mo, 7-day free trial
- Account required — Linkfolio: None; Linktree: Yes, a Linktree account; LinkStack: Yes, an account on the instance; Bio.link: Yes, a Bio Link account
- Open source — Linkfolio: Yes, MIT; Linktree: —; LinkStack: Yes, AGPL-3.0; Bio.link: —
- Your own domain — Linkfolio: Yes, you deploy it; Linktree: No, pages live at linktr.ee/username; LinkStack: Yes, self-hosted or on the $5/mo plan; Bio.link: Yes, on the paid plan
- Where your data lives — Linkfolio: Your infrastructure; Linktree: —; LinkStack: Your own web server when self-hosted; Bio.link: —
- Built with — Linkfolio: Next.js and Tailwind CSS; Linktree: —; LinkStack: PHP and Laravel; Bio.link: —

"—" means the vendor does not publish that information. Competitor details checked 2026-08-17.

- Linktree: https://linktr.ee/s/pricing
- Linktree: https://linktr.ee/help/en/articles/6571689-can-i-change-the-linktree-url-to-a-custom-domain
- LinkStack: https://linkstack.org/
- LinkStack: https://github.com/LinkStackOrg/LinkStack
- Bio.link: https://bio.link/

## Frequently asked questions

Q: Is Linkfolio free?
A: Yes. Linkfolio is open source under the MIT licence. You host it yourself, so there is no subscription and no usage limit.

Q: How is it different from Linktree?
A: 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.

Q: Do I need to know Next.js to use it?
A: 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.

Q: Can I add it to an existing Next.js project?
A: Yes. Install the linkfolio package and render the LinkFolio component with your own config object.

Q: Can I use Google Analytics with Linkfolio?
A: 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 and Umami 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.

## Links

- Source code: https://github.com/heristop/linkfolio
- Package: https://www.npmjs.com/package/linkfolio
- Landing page: https://linkfolio-demo.vercel.app
- Demo: https://linkfolio-demo.vercel.app/demo
- Documentation: https://linkfolio-demo.vercel.app/docs
- Example implementation: https://github.com/heristop/my-linkfolio
- License: MIT