A personal or studio introduction: a portrait with a caption, one sentence that says who and where, two actions and availability in words.
Illustrator
Hi, I’m Lucía, an illustrator and brand designer based in Antigua, Guatemala.
I take scattered ideas, loose sketches and too many colors, and bring them down to one clear picture. The harder the brief, the more fun it gets.
Booking projects for early 2027
Installation
Add it with the shadcn CLI, or copy the source by hand.
$ pnpm dlx shadcn@latest add @ssntl/introAPI reference
mediarequiredType:React.ReactNodeAn <img> with alt text; it fills a 3:4 frame.Default:—mediaLabel?Type:React.ReactNodeA short caption over the bottom of the portrait.Default:—titlerequiredType:React.ReactNodeDefault:—description?Type:React.ReactNodeDefault:—actions?Type:React.ReactNodeOne primary and one secondary Button.Default:—status?Type:React.ReactNodeAvailability in words: “Booking projects for March”.Default:—
Also takes every prop of <section>.
Rules
What this component expects from you, as it ships in components/blocks/intro.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.
## Rules for Intro
- The portrait is a 3:4 Frame; the caption sits on a dark fade so it reads on any photo.
- **The heading is the introduction.** One sentence with who, what and where, balanced over its lines.
- One primary action and one secondary; the second never competes with the first.
- Availability says it in words; the green dot only repeats it.
- Give the portrait real alt text; a decorative image gets `alt=""`.