Starcard is an Astro template by alexandr-studio for building a minimalist personal identity card: a single-page profile with QR contact sharing and optional vCard download, configured entirely from your Astro config.
What is Starcard?
Starcard is an Astro integration that renders a personal profile page from a typed configuration object. You provide site metadata, footer text, and a profile definition in your astro.config.mjs or .ts; the integration validates it with Zod and exposes a virtual module that components import to render the page. The output is a static site with your name, title, links, and a QR code that mobile visitors can scan to share or save your contact details. The template is maintained by alexandr-studio and released under the MIT license.
Key Features
- QR contact sharing — On touch devices, tapping any link opens a QR dialog; on desktop, links open in a new tab and modifier-click shows the QR code.
- vCard support — Set
vcard: truein your profile to add a QR code that lets visitors save you as a contact. - Single config file — Everything lives in
astro.config.mjsor.ts, including meta, footer, and profile sections, similar to Starlight's approach. - Zod-validated options — The integration validates your config at build time and exposes it via a
virtual:starcard/configmodule. - SEO-ready layout —
Layout.astrogenerates title, description, keywords, canonical, Open Graph, and Twitter cards from your meta settings. - Tailwind CSS v4 — Styling uses Tailwind's utility-first CSS, so you customize the look without leaving the Astro ecosystem.
- Iconify Simple Icons — Section and item icons are drawn from Iconify's Simple Icons set using lowercase names, with aliases like
twittermapping tox. - Orderable sections — Add
orderto sections and items to control rendering order; sections and items display in ascending order.
Who is it for?
Starcard suits anyone who needs a lightweight, mobile-friendly digital business card rather than a full portfolio site. Developers and freelancers can point their domain at a Starcard page to share contact details and social links via a scannable QR code. People who attend conferences or meet clients can use the vCard QR to let others add their contact information in one tap. Teams that want a branded personal page for members can fork the template and reuse the same configuration pattern.
What can you do with Starcard?
- Freelancers and consultants: Replace a paper business card with a QR code that opens your profile, letting clients save your vCard or open your social links.
- Conference attendees: Show your phone's profile page at networking events so people can scan and immediately add you to contacts.
- Personal-brand builders: Host a clean one-pager with your name, title, company, email, phone, and social links without maintaining a CMS.
How does Starcard work?
In practice, you scaffold a new Astro project with the template command, then edit astro.config.mjs or .ts to add the Starcard integration and your profile data. The integration validates the config with Zod, exposes it through a virtual module, and the included pages and components render the profile. Run pnpm install and pnpm dev to develop locally, or build a static site for deployment.
FAQ
What does Starcard do?
Starcard generates a single-page personal identity card from your Astro config. It renders your name, title, contact details, social links, and a QR code for sharing. The page is static, so it can be hosted on any static host.
How do I configure Starcard?
Add the Starcard integration to your astro.config.mjs or .ts and provide a meta, footer, and profile object. The profile defines display name, title, company, email, phone, location, social sections, and legal items. Zod validates the structure at build time.
Does Starcard support vCards?
Yes, if you set vcard: true in your profile config, Starcard adds a QR code that encodes your contact information so visitors can quickly add you to their address book. This works alongside the regular link-sharing QR dialog.
What are the requirements for running Starcard?
You need Node.js version 18.17 or newer (Node 20 or later is recommended) and a package manager like pnpm, npm, or yarn. The template itself runs on Astro and uses Tailwind CSS v4.
Is Starcard free to use?
Yes, the repository is licensed under the MIT license, which means you can use and modify it freely, including in commercial projects. There is no separate pricing or tier system.
