Build your digital business card

Starcard is an Astro template: configure everything in your astro.config.mjs and deploy.

Getting Started

Clone or use the template, then configure via astro.config.mjs.

Quick Setup

1 Use the GitHub template or clone your repo
2 Install dependencies: pnpm install
3 Edit astro.config.mjs and update the Starcard integration options
4 Run pnpm dev to preview locally
5 Deploy (Vercel, Netlify, GitHub Pages, etc.)

Full astro.config.mjs example

import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";
import starcard from "./src/integrations/starcard.js";

export default defineConfig({
  site: "https://example.com",
  integrations: [
    sitemap(),
    starcard({
      meta: {
        title: "Ava Thompson",
        description: "Product Designer & Frontend Developer",
        keywords: ["profile", "vcard", "portfolio", "links"],
        favicon: "/favicon.svg",
      },
      footer: { text: "© 2025 Ava Thompson" },
      profile: {
        displayName: "Ava Thompson",
        firstName: "Ava",
        middleName: "L.",
        lastName: "Thompson",
        title: "Senior Product Designer",
        company: "Studio North",
        companyUrl: "https://studionorth.example",
        avatarUrl: "https://avatars.githubusercontent.com/u/9919?v=4",
        avatarRounded: "full",
        email: "[email protected]",
        phone: "+1 415 555 0199",
        homePage: "https://ava.design",
        location: "San Francisco, USA",
        vcard: true,
        sections: [
          {
            order: 1,
            id: "socials",
            title: "Socials",
            icon: "share",
            items: [
              { id: "github", icon: "github", url: "https://github.com/ava" },
              { id: "linkedin", icon: "linkedin", url: "https://www.linkedin.com/in/ava" },
              { id: "x", icon: "x", url: "https://x.com/ava" },
            ],
          },
          {
            order: 2,
            id: "presence",
            title: "Presence",
            icon: "globe",
            items: [
              { id: "website", icon: "icloud", url: "https://ava.design" },
              { id: "youtube", icon: "youtube", url: "https://www.youtube.com/@ava" },
            ],
          },
          {
            order: 3,
            id: "support",
            title: "Support",
            icon: "buymeacoffee",
            items: [
              { id: "bmac", icon: "buymeacoffee", url: "https://buymeacoffee.com/ava" },
            ],
          },
        ],
      },
    }),
  ],
});

How it works

Minimal business card layout with smart link sharing.

Mobile behavior

Tapping any link opens a QR dialog so others can scan the link easily. There is also a link to show a QR code that generates a vCard for quick “Add to Contacts”. Each link has its own auto‑generated QR code.

Desktop behavior

Clicking a link opens it in a new tab. Hold Option/Alt or Ctrl while clicking to show the same QR dialog as on mobile.

Sections & items

Add multiple sections (e.g., Multimedia, Social, Presence). Each section and item supports an icon and a url. Use order to control display order.

Icons

Icons use Iconify’s Simple Icons set. Set icon to a Simple Icons name like github, linkedin, x, bluesky, substack, mastodon.

Icon Library

Starcard uses Iconify’s Simple Icons set for brands.

How to choose icons

Open Iconify – Simple Icons
Search for your brand and copy the name (e.g., github, linkedin)
Use the name in your config under icon

Notes

Names are lowercase; some aliases exist (e.g., twitter → x)
Section icon and each item icon can differ
Icons render server-side; no extra setup required

Configuration Reference

All options live in the Starcard integration inside your Astro config.

Meta & Footer

Path	Type	Description
meta.title	string	Document title and site branding
meta.description	string	SEO description
meta.keywords	string[]	SEO keywords
meta.favicon	string	Path to favicon
footer.text	string	Footer copyright text

Profile

Field	Type	Required	Description
displayName	string	yes	Primary name shown on the card
firstName	string	yes	Given name (used for vCard)
middleName	string	no	Middle name(s)
lastName	string	yes	Family name (used for vCard)
title	string	no	Role or tagline
company	string	no	Organization name
companyUrl	string (url)	no	Link to organization
avatarUrl	string (url)	no	Photo URL
avatarRounded	"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"	no	Avatar border radius preset
email	string (email)	no	Contact email
phone	string	no	Contact phone number
homePage	string (url)	no	Personal website URL
location	string	no	City, Country
vcard	boolean	no	Enable vCard QR link
sections	Section[]	no	Configurable content groups

Section

Field	Type	Required	Description
order	number	no	Sort order (ascending)
id	string	no	Identifier (e.g., "socials")
title	string	no	Section title
icon	string	no	Iconify Simple Icons name
items	SectionItem[]	no	Links inside the section

SectionItem

Field	Type	Required	Description
id	string	no	Identifier for the item
icon	string	no	Iconify Simple Icons name
url	string (url)	no	Target URL (QR is auto-generated)

Sections & Items

sections: [
  {
    order: 1,
    id: "socials",
    title: "Socials",
    icon: "social",
    items: [
      { id: "github", icon: "github", url: "https://github.com/you" },
      { id: "bluesky", icon: "bluesky", url: "https://bsky.app/profile/you" },
      { id: "x", icon: "x", url: "https://x.com/you" },
    ],
  },
  {
    order: 2,
    id: "presence",
    title: "Presence",
    icon: "globe",
    items: [
      { id: "website", icon: "icloud", url: "https://example.com" },
      { id: "youtube", icon: "youtube", url: "https://www.youtube.com/@your-channel" },
    ],
  },
];

Icons use Iconify Simple Icons. Browse names at Iconify – Simple Icons.

Tips & Best Practices

Keep config simple; sharing is one tap or one scan away.

Fast sharing

On touch devices, links show QR codes by default. On desktop, hold Option/Alt or Ctrl to show QR instead of opening a tab.

vCard

Enable profile.vcard to show a QR that encodes a vCard, so people can add you to Contacts instantly.

Icons

Prefer official brand names from Simple Icons. A few aliases are supported (e.g., twitter → x).

Need Help?

Open an issue on GitHub or go back to the homepage.

GitHub Issues Back to Home