Linkfolio

Linkfolio is an open-source link-in-bio landing page template built with Next.js and TailwindCSS that gathers all of your online presences into a single minimalist page.

What is Linkfolio?

Linkfolio is a link-in-bio template created by GitHub user heristop that runs on the Next.js framework and uses TailwindCSS for styling. It takes a user.config.ts file with your name, avatar, social network URLs, and SEO metadata, and renders a responsive landing page with a profile header and a list of social links. The template can be cloned and deployed directly to Vercel or installed as an npm package called linkfolio for use in an existing Next.js project. It is released under the MIT License.

Key Features

• Next.js framework — Built with Next.js for server-side rendering and optimal performance, and deployable to Vercel with a one-click template.
• TailwindCSS styling — Uses TailwindCSS utility classes; theme colors can be changed by overriding variables such as --color-primary and --color-background-start in globals.css.
• Easy configuration — Edit user.config.ts to add or remove social networks, set your avatar path, alias, full name, meta title, and meta description.
• Customizable components — The LinkFolio component accepts optional props like BeforeSocialLinksComponent, AfterSocialLinksComponent, and FooterComponent to inject custom React content.
• Responsive design — The layout adapts to mobile, tablet, and desktop screens, making your links accessible anywhere.
• Typing-effect alias — Enable enableTypingAlias to add a typewriter animation to your displayed alias.
• Public configuration API — A /api/config route returns your Linkfolio data as JSON, useful for debugging or building third-party widgets.
• Playwright testing — Includes end-to-end tests with Playwright and commands to update reference snapshots as the UI changes.

Who is it for?

• Developers who want a self-hosted, open-source alternative to hosted link-in-bio services and are comfortable editing a TypeScript config file.
• Content creators who need a single profile page linking to their YouTube, Instagram, GitHub, or other platforms and want full control over the design.
• Freelancers and professionals who want a minimalist online hub that presents their social networks and projects without building a site from scratch.

What can you do with Linkfolio?

• Launch a live link page quickly — Use the Vercel deploy button, which installs dependencies with npm install --legacy-peer-deps, then edit user.config.ts to personalize it.
• Integrate into an existing Next.js site — Install the linkfolio package with npm, yarn, or pnpm and render the LinkFolio component with a userConfig object inside any page.
• Fully restyle the theme — Override the default CSS variables in globals.css to change the gradient background, primary and secondary colors, or swap the default Raleway font for any Google font via layout.tsx.

How does Linkfolio work?

Linkfolio works by reading a single userConfig object with properties like avatarSrc, fullName, alias, and socialNetworks, then rendering them through the LinkFolio component. For customization hooks, you can pass React components as props to place content before or after the social links, or replace the footer entirely. The page also exposes a public API that mirrors your configuration as JSON.

FAQ

Is Linkfolio free?

Yes, Linkfolio is open-source under the MIT License. You can freely use, modify, and distribute it. Hosting on Vercel is free for personal projects subject to Vercel's terms.

How do I change the font?

Linkfolio uses the Raleway font by default. To change it, open layout.tsx and replace the Google Font import, for example with the Roboto font at weight 400, then update the font-family assignment.

Can I add custom content above or below my links?

Yes, the LinkFolio component accepts optional BeforeSocialLinksComponent and AfterSocialLinksComponent props where you can render any React elements, such as welcome text, embedded media, or calls to action.

Does Linkfolio expose an API?

Yes, Linkfolio includes a public /api/config route that returns your configuration data in JSON format. The documentation warns not to place sensitive information in the config because the endpoint is world-readable.

Alternatives

• Linktree — a commercial hosted link-in-bio service that is simpler to use but closed-source and less customizable than self-hosting Linkfolio.