Resource

UI Component Library. Names, prompts, crawler notes.

A reference for anyone shipping web features with AI tools. 59 common components, each with a rendered preview, the words you need to prompt for it, three prompt-flavor templates, and a note on what the component does to AI-crawler visibility.

Read the companion articleHave me build these for you

The pattern

How to prompt for any UI component

Before the component list, a small grammar lesson. The components in this library are the vocabulary; this pattern is the grammar that lets you compose any prompt for any component, including the dozens that aren't in here yet.

The prompt grammar

[component] + [variant] + [state] + [placement] + [behavior] + [responsive]

In practice

“Add a primary submit button with a loading state, disabled when the form is invalid, anchored to the bottom of the form on mobile.”

Every entry below includes three prompts using this grammar: one for AI site-chat editors, one for code-generating AI (Cursor, Claude Code, v0), and one for design-generating AI (Figma Make, Uizard, Galileo).

Jump toNavigation(10)Content(17)Layout(3)Input(14)Data(6)Feedback(9)

Category

Content

Building blocks for the stuff you actually want people to read. Several of these quietly hide content from AI by default.

Accordion

Also called: collapsible, disclosure, expander

What does this include?−

Everything listed in the scope document, including the ongoing optimization phase.

How long does it take?+

Definition

A vertically stacked set of headers that expand to show content when clicked, and collapse to hide it. Only one (or several) panel is open at a time.

Use when

FAQs, specification lists, or any content that's useful to scan at the header level but only some readers need fully expanded.

Don't use for

Primary content you want indexed by search engines or cited by AI. Also avoid for content everyone needs (just show it).

AI-crawler note

The single most consequential component on this list. Native <details>/<summary> is crawler-safe because content is in the initial HTML. Most React accordion libraries only render the panel when open, which means AI crawlers see empty panels. Radix and shadcn/ui accordions render server-side and are safe.

Accessibility: Use aria-expanded on the trigger and aria-controls pointing at the panel ID. Radix and Headless UI handle this correctly.

Prompt templates

Chat-editor (AI site builder)

“Add an FAQ accordion below the pricing section with six questions. Smooth open/close animation, only one open at a time.”

Code-gen (Cursor / Claude Code / v0)

“Build an accordion using Radix primitives with server-rendered panel content, CSS-animated max-height for smooth transitions, and keyboard support (Up/Down to navigate, Home/End to jump).”

Design-gen (Figma Make / Uizard)

“Design a six-item FAQ accordion. Question in semibold, chevron indicator on the right that rotates when open, muted body text when expanded.”

Card

Also called: tile, panel, preview

Case Study

$400K annual savings

Custom AI ordering system for a commercial door installer.

Definition

A self-contained block of related content with a border or shadow, typically containing an image, title, description, and link.

Use when

Any repeatable content pattern: blog previews, case studies, products, team members. Cards scan quickly and compose into grids.

Don't use for

Standalone content that would read better as a full-width section.

AI-crawler note

Cards are generally crawler-friendly since they're standard HTML. Risk: content revealed on hover (hover-to-expand descriptions) is invisible to crawlers. Keep any content that matters in the initial DOM.

Prompt templates

Chat-editor (AI site builder)

“Create a case-study card grid, three per row on desktop, one per row on mobile. Each card has an image, tag, title, two-sentence description, and a 'View case study →' link.”

Code-gen (Cursor / Claude Code / v0)

“Build a Card component with image, tag, title, description, and link slots. Tailwind classes for grid parent: grid md:grid-cols-2 lg:grid-cols-3 gap-6. Hover state lifts the card 4px.”

Design-gen (Figma Make / Uizard)

“Design a case-study card with 16:9 image on top, small eyebrow tag in accent color, bold title, two lines of muted description, and a text link with arrow.”

Hero section

Also called: lead, above-the-fold, opener, banner

Services

Built for speed. Shipped fast.

Get started
Learn more

Definition

The first large content block on a page, containing the headline, subtitle, and primary CTAs. Usually full-viewport-width and often tall enough to dominate the fold.

Use when

Home pages, landing pages, top of service or product pages. Anywhere the reader needs an immediate answer to 'what is this?'.

Don't use for

Interior content pages where the reader arrived from search for a specific answer. A hero wastes their scroll.

AI-crawler note

Keep hero copy as real text, not images or SVG text. The hero headline is often the most important line on a page for AI extraction; rendering it as an image makes it invisible.

Prompt templates

Chat-editor (AI site builder)

“Rewrite the hero with an eyebrow label ('Services'), an H1 with gradient accent on the second half ('Built for speed. Shipped fast.'), a one-sentence subtitle, and two CTAs (primary + secondary outline).”

Code-gen (Cursor / Claude Code / v0)

“Build a hero section component: eyebrow, H1 with configurable gradient span, subtitle paragraph, primary + secondary CTA button row. Use semantic <h1> (only one per page).”

Design-gen (Figma Make / Uizard)

“Design a B2B SaaS hero: small accent eyebrow, 56px bold headline with gradient accent on the last two words, 18px muted subtitle, two buttons (gradient primary + outlined secondary), positioned above the fold.”

CTA block

Also called: call-to-action, conversion block, banner CTA

Ready to start?

Book a 30-minute discovery call.

Book a call

Definition

A self-contained section whose only job is to drive the reader to the next step: book a call, sign up, start a trial, download a resource.

Use when

At the end of long articles, between content sections on landing pages, at the bottom of every marketing page. One per page minimum.

Don't use for

Inside in-product flows or utility pages where the primary action is already obvious.

AI-crawler note

Use real anchor tags with real hrefs so AI can extract a destination URL. If the CTA is a JS-triggered modal or a React onClick with no href, the AI summary of your page will be missing the 'here's how to engage' step.

Prompt templates

Chat-editor (AI site builder)

“Add a CTA block at the bottom of each service page: headline ('Ready to scope a build?'), one-sentence subhead, primary button ('Book a call') linking to /contact.”

Code-gen (Cursor / Claude Code / v0)

“Build a CTA block component: headline, subhead, and one or two CTA buttons. Contrast background (accent gradient or surface). Buttons are <a> tags with real hrefs, not onClick handlers.”

Design-gen (Figma Make / Uizard)

“Design a centered CTA block on a gradient background, one headline, one subhead, one primary button, plenty of padding. Roughly 400px tall.”

Feature list

Also called: feature grid, benefits list, capability grid

Fast

One-sentence description of the feature.

Owned

One-sentence description of the feature.

Custom

One-sentence description of the feature.

Definition

A grid or list of short 'what you get' items, each with an icon, title, and one-sentence description.

Use when

Service pages, product pages, landing pages; anywhere you need to enumerate capabilities without writing a long paragraph.

Don't use for

When the items are complex enough to need full paragraphs. A feature list with five-sentence descriptions is really a content section with the wrong layout.

AI-crawler note

Feature lists are crawler-friendly when each item's icon, title, and description are all in the initial HTML. Avoid lazy-loading below-fold items unless you also server-render them.

Prompt templates

Chat-editor (AI site builder)

“Add a three-column feature grid between the hero and testimonials: 'Fast', 'Owned by you', 'Custom-fit', each with an icon, a short title, and a one-sentence description.”

Code-gen (Cursor / Claude Code / v0)

“Build a FeatureList component taking an array of { icon, title, description }. Render as a responsive grid (md:grid-cols-3). Each feature is a <dl> with <dt> for the title and <dd> for the description.”

Design-gen (Figma Make / Uizard)

“Design a three-up feature grid with simple line icons in accent color, bold titles, and two-line muted descriptions. Flat cards, no shadows.”

Testimonial block

Also called: quote card, client quote, social proof

“A total game-changer. Saved us months of work.”

VP
VP of Operations
Commercial Installer

Definition

A styled quote from a client or colleague with attribution (name, role, company, sometimes photo).

Use when

Service pages, landing pages, just before a CTA block. Social proof is the oldest and most reliable conversion lever.

Don't use for

Without permission or without attribution. Fake or un-attributed testimonials damage trust more than they help.

AI-crawler note

Wrap in schema.org <Quotation> or <Review> JSON-LD so AI can extract them as structured social proof. Real attribution is essential; LLMs are increasingly fact-checking quotes.

Prompt templates

Chat-editor (AI site builder)

“Add a testimonial block between the services grid and the contact form. Large italic pull-quote, attribution below with avatar initials in an accent circle.”

Code-gen (Cursor / Claude Code / v0)

“Build a Testimonial component: quote, author name, author role, avatar. Wrap in schema.org Quotation JSON-LD. Responsive: stacks vertically on mobile, quote on left and author on right on desktop.”

Design-gen (Figma Make / Uizard)

“Design a standalone testimonial block: 24px italic quote, author avatar in a gradient circle, name in semibold + role in muted text. Horizontal layout with generous white space.”

Empty state

Also called: zero state, blank state, null state

+
Nothing here yet

Start by adding your first item.

Add one

Definition

The UI shown when a list, page, or section has no content yet — typically an illustration or icon with a short message and a primary action.

Use when

Any list, inbox, search result, or data view that can be empty. Good empty states turn dead ends into onboarding moments.

Don't use for

Never leave a list empty with just white space. An empty state is mandatory for any component that can render zero items.

AI-crawler note

Empty-state content is usually crawler-visible (rendered as part of the page). If it's the landing state, make sure the meaningful content (why is it empty, what to do) is in real text, not just an illustration.

Prompt templates

Chat-editor (AI site builder)

“When the saved-projects list is empty, show an illustration, a 'No saved projects yet' headline, one-sentence subhead, and a 'Browse the library' CTA button.”

Code-gen (Cursor / Claude Code / v0)

“Build an EmptyState component: icon or illustration slot, headline, body text, primary CTA. Use when a list/table has zero items. Default variants: no-data, no-results, error.”

Design-gen (Figma Make / Uizard)

“Design an empty-state card: 80x80 icon in accent color, 18px headline, 14px muted description, primary button. Centered, generous padding, no container shadow.”

AI Chat

Also called: chat interface, conversation UI, chatbot

How do I set this up?
Start by installing the SDK and...

Definition

A conversational interface with alternating user and assistant messages, typically including a text input, send button, and message history.

Use when

AI-native features, support chat, onboarding assistants, in-app AI coworkers. The pattern is standard enough that users know what to do on sight.

Don't use for

When a form or guided flow would work better. Chat is powerful but high-friction compared to structured UIs.

AI-crawler note

Chat content is dynamic and usually not crawler-visible. If the chat is a primary interface, pair it with static content explaining what it does (docs page, landing hero).

Accessibility: Use aria-live="polite" on the message list so new messages are announced. Label the input with a clear placeholder. Send action should be keyboard-triggerable (Enter).

Prompt templates

Chat-editor (AI site builder)

“Add an AI-chat component in the bottom right: user + assistant message bubbles, textarea input that grows on newlines, send button, typing indicator for the assistant.”

Code-gen (Cursor / Claude Code / v0)

“Build a Chat component using the Vercel AI SDK. Messages array with {role, content}, streaming text from the assistant, auto-scroll to bottom on new messages, markdown rendering in assistant responses.”

Design-gen (Figma Make / Uizard)

“Design an AI chat interface: user messages right-aligned in accent bubbles, assistant messages left-aligned in neutral bubbles, avatar circle for each speaker, input bar sticky at the bottom.”

Pricing section

Also called: pricing table, pricing tiers, plans

Starter
$49
/mo
Pro
$199
/mo
Enterprise
Call
/mo

Definition

A section of a marketing page showing 2–4 plan tiers with price, feature list, and a CTA per tier.

Use when

SaaS and service pages where pricing is standardized enough to tier. If pricing is fully custom, use a form-style 'Request pricing' CTA instead.

Don't use for

For service businesses with fully custom engagements — a generic pricing table can underrepresent what you actually do.

AI-crawler note

Pricing is one of the highest-intent queries for AI search (users asking 'how much does X cost'). Real text prices with feature lists in the initial HTML get cited. Prices hidden behind modal or login get ignored.

Prompt templates

Chat-editor (AI site builder)

“Add a three-tier pricing section: Starter ($49/mo), Pro ($199/mo), Enterprise (contact). Highlight Pro as recommended. Feature list under each, CTA button at the bottom.”

Code-gen (Cursor / Claude Code / v0)

“Build a Pricing component taking an array of tiers {name, price, features, cta, recommended}. Highlight the recommended tier with a gradient border and 'Most popular' badge.”

Design-gen (Figma Make / Uizard)

“Design a 3-tier pricing section on a light background: cards with tier name, price in large bold, feature list with check icons, CTA button. Middle tier has a scale-up and accent border.”

Client logo wall

Also called: logo grid, clients block, trusted by

Trusted by
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO

Definition

A grid of client or partner logos, usually grayscale, used as social-proof above the fold or near pricing.

Use when

When the brands you've worked with are recognizable enough that seeing their logo builds trust.

Don't use for

When the names aren't known enough to matter, or when you're contractually prohibited from displaying them.

AI-crawler note

Logos are images, which crawlers can't read as text. Pair the logo wall with a sentence mentioning the brands by name in real HTML so AI can extract the list.

Accessibility: Every logo image needs a meaningful alt attribute (the brand name).

Prompt templates

Chat-editor (AI site builder)

“Add a 'Trusted by' section below the hero with 6 client logos in grayscale, colored on hover. Include a caption line like 'Fortune 500 brands and growth-stage SaaS'.”

Code-gen (Cursor / Claude Code / v0)

“Build a LogoWall component taking an array of {name, src}. Render as an evenly-spaced grid. grayscale opacity-70 by default, hover:grayscale-0 opacity-100.”

Design-gen (Figma Make / Uizard)

“Design a logo wall: 6 client logos in a single row on desktop, 3x2 on mobile. Grayscale with opacity to read as a unified block. Subtle fade at the edges.”

Comparison section

Also called: vs block, us vs them, competitor comparison

Feature
Us
Them
Source code
✓
×
Own infrastructure
✓
×
No retainers
✓
×

Definition

A side-by-side or table comparing your offering against alternatives, typically with checkmarks and X marks across feature rows.

Use when

Sales pages, competitor-alternative pages ('Brand X vs Competitor Y'), buyer's-guide content. Users in late-stage evaluation search for these.

Don't use for

When the competitor is a friend or partner. Hostile comparisons can backfire reputationally.

AI-crawler note

This is one of the highest-value AEO patterns. Real table markup + the exact search phrase ('X vs Y') in the H1 is how LLMs surface comparison pages in response to buyer queries.

Prompt templates

Chat-editor (AI site builder)

“Add a comparison section comparing us to Competitor X across 8 dimensions. Table format, check/X icons, row for price, feature, support, integrations, etc.”

Code-gen (Cursor / Claude Code / v0)

“Build a ComparisonTable component. Two columns (us / them) or three (plus a third competitor). Semantic <table> markup with <th scope> for row and column headers.”

Design-gen (Figma Make / Uizard)

“Design a comparison table: our column highlighted with accent background, competitor column muted. Check icons in accent green for our features, X in muted gray for missing ones.”

Image block

Also called: figure, hero image, feature image

Image
Figure 1: caption goes here.

Definition

A sized and positioned image element, often with optional caption, used to illustrate content inline or as a section feature.

Use when

Anywhere a visual illustrates or anchors text content. Use semantic <figure>/<figcaption> for captioned images.

Don't use for

For content that matters — don't put important text inside an image. AI crawlers can't read image text without OCR (and usually skip that step).

AI-crawler note

Every content-bearing image needs a meaningful alt attribute. Alt text is one of the primary signals AI uses to understand what an image depicts.

Accessibility: Decorative images: alt="". Content images: descriptive alt. Complex images (charts, diagrams): pair with a text description nearby.

Prompt templates

Chat-editor (AI site builder)

“Replace the placeholder image in the hero with a photo of the factory floor, 16:9 aspect ratio, lazy-loaded, with alt 'A commercial door installer's factory floor'.”

Code-gen (Cursor / Claude Code / v0)

“Build an Image component wrapping Next.js Image. Required alt prop (no default). Aspect-ratio support via CSS. Figure + figcaption when caption prop provided.”

Design-gen (Figma Make / Uizard)

“Design an image block: 16:9 default aspect ratio, rounded corners, subtle shadow, optional caption in muted text below.”

Video embed

Also called: video player, video block, embedded video

▶
2:14

Definition

An embedded video player (YouTube, Vimeo, or self-hosted) with optional poster image, captions, and autoplay.

Use when

Demos, testimonials, product walkthroughs, recorded talks. Short (under 2 minutes) with captions tends to perform best on marketing pages.

Don't use for

For essential content, duplicate the key points in text so users who don't watch and AI crawlers both get the message.

AI-crawler note

AI crawlers don't watch videos. Transcripts and captions in real HTML are how the content becomes AI-readable. Always ship a transcript below the video for anything that has words in it.

Prompt templates

Chat-editor (AI site builder)

“Replace the static hero image with a muted autoplay video showing the factory tour. Loop, with a 'Watch full version' CTA below.”

Code-gen (Cursor / Claude Code / v0)

“Build a VideoEmbed component. Takes YouTube/Vimeo/self-hosted URL. Lazy-loads the player (intersection observer) to avoid blocking LCP. Poster image slot. Auto-caption toggle.”

Design-gen (Figma Make / Uizard)

“Design a video embed block: 16:9 with rounded corners, centered play button overlay on the poster, duration label in the bottom-right, transcript expand below.”

Map

Also called: map embed, location map, interactive map

Definition

An interactive map (Google Maps, Mapbox, etc.) showing one or more locations, usually embedded on a contact or locations page.

Use when

Local businesses, multi-location listings, service-area visualization, event venues.

Don't use for

When a plain address + link to external map app would serve users just as well. Embedded maps are heavy.

AI-crawler note

Maps are client-rendered and invisible to crawlers. Pair the map with the address in real HTML (ideally with LocalBusiness JSON-LD schema) for AI and SEO visibility.

Prompt templates

Chat-editor (AI site builder)

“Add a map to the contact page showing the office location. Below the map, include the address, phone, and hours in plain text.”

Code-gen (Cursor / Claude Code / v0)

“Build a Map component using Mapbox GL or Google Maps. Lazy-load the library (don't ship it on page load). Pin the location, static zoom, disable drag on mobile.”

Design-gen (Figma Make / Uizard)

“Design a location map section: full-width map on top, address card overlapping the bottom-left, subtle gradient mask on the map edges.”

Announcement bar

Also called: marquee, top banner, promo bar

Q3 engagement slots are open →×

Definition

A slim horizontal bar at the very top of the site carrying a time-bound message: promotion, event, news, status.

Use when

Launches, limited-time offers, system status, conference announcements. Remove promptly when no longer relevant.

Don't use for

As permanent chrome. A persistent announcement bar loses attention within days and just steals vertical space.

AI-crawler note

Server-render so AI crawlers see the announcement (often contains timely keywords). Announcement bars rendered client-only post-hydration are invisible to crawlers.

Prompt templates

Chat-editor (AI site builder)

“Add an announcement bar above the header: 'Q3 engagement slots are open → scope a build'. Dismissible, remembers dismissal for 7 days.”

Code-gen (Cursor / Claude Code / v0)

“Build an AnnouncementBar component. Server-rendered by default. Dismissible state persisted to localStorage with a content-hash key so new announcements reappear.”

Design-gen (Figma Make / Uizard)

“Design an announcement bar: 36px tall, accent gradient background, white centered text, optional arrow linking to a page, close X on the right.”

Category

Layout

Containers that organize everything else. Structural, not semantic.

Grid

Also called: grid layout, column grid

1
2
3
4
5
6

Definition

A rigid set of equal-width columns used to lay out repeating content (cards, features, logos, team members).

Use when

Anywhere you have a set of similar items (3+) that should be compared or scanned at the same visual weight.

Don't use for

Mixed-weight content where one item matters more than the others, a bento layout or split screen reads better.

AI-crawler note

Grids are pure structure, no crawler impact. Use semantic HTML inside (<ul> + <li>, <article> for cards) so the relationship between items is machine-readable.

Prompt templates

Chat-editor (AI site builder)

“Arrange the six case studies in a three-up grid on desktop, two on tablet, one on mobile. Gap of 24px between cards.”

Code-gen (Cursor / Claude Code / v0)

“Use Tailwind's grid utilities: grid md:grid-cols-2 lg:grid-cols-3 gap-6. Wrap each item in <article> for semantic structure.”

Design-gen (Figma Make / Uizard)

“Design a responsive grid layout: 3 columns desktop, 2 tablet, 1 mobile. 24px gutters. Equal card heights using row alignment.”

Bento layout

Also called: bento grid, bento box, asymmetric grid

Hero

Definition

A grid of cards with mixed sizes, where larger cards emphasize hero content and smaller cards fill the remaining space, inspired by Japanese bento-box compartment layouts.

Use when

Feature showcases, home-page summaries of multiple offerings, anywhere one or two items deserve visual weight over the others.

Don't use for

When every item should have equal weight. Bento emphasis is the whole point.

AI-crawler note

Same as regular grids, no crawler impact from the layout itself. Make sure the visually-largest card isn't the least-important content for AI extraction.

Prompt templates

Chat-editor (AI site builder)

“Replace the three-up services grid with a bento layout: first service takes a 2x2 cell as the hero, the remaining five fit around it in 1x1 cells.”

Code-gen (Cursor / Claude Code / v0)

“Build a bento grid with Tailwind grid-template utilities. Hero card spans col-span-2 row-span-2 at md+. Explicit grid areas via named placement.”

Design-gen (Figma Make / Uizard)

“Design a bento layout with six items: one large hero card (2x2), one wide card (2x1), and four standard cards (1x1). Uniform gutters, consistent internal padding per card.”

Split screen

Also called: two-column layout, side-by-side, 50/50

Headline

Subhead goes here.

• Point one
• Point two

Definition

A section divided into two equal-width columns, typically with visual content on one side and copy on the other.

Use when

Feature sections on marketing pages, side-by-side comparisons, copy + supporting visual pairs.

Don't use for

Small viewports where the split has to collapse to vertical anyway, better to design vertical-first.

AI-crawler note

No direct impact. Just make sure the copy side uses semantic headings so crawlers understand the content hierarchy.

Prompt templates

Chat-editor (AI site builder)

“Create a split-screen section: copy on the left (headline + subhead + three bullets), product screenshot on the right.”

Code-gen (Cursor / Claude Code / v0)

“Use grid md:grid-cols-2 gap-8 items-center. Stack vertically on mobile with the copy on top.”

Design-gen (Figma Make / Uizard)

“Design a 50/50 split-screen section: left side is copy with headline, subhead, and three icon bullets; right side is a stylized product screenshot in a gradient frame.”

Category

Input

How people give you information. Accessibility-heavy territory.

Button

Also called: primary button, action button, CTA, pill

Definition

A clickable element that triggers an action. Comes in variants (primary, secondary, ghost, destructive) and states (default, hover, disabled, loading).

Use when

Any in-page action. Use an <a> tag when the destination is another URL; use <button> when the action stays on the page.

Don't use for

For navigation to another URL — use <a> (styled as a button) so crawlers can follow the link.

AI-crawler note

Critical: buttons whose onClick handler navigates to a URL are invisible to crawlers. Use <a href> styled as a button for anything that's really a link. Use <button> only for actions that stay on the current page.

Accessibility: Real <button> elements get keyboard activation for free. If you're styling a <div> as a button, you're re-implementing accessibility primitives badly. Don't.

Prompt templates

Chat-editor (AI site builder)

“Add a primary CTA button labeled 'Book a call' anchored to the bottom-right of the contact form, with a hover-lift effect.”

Code-gen (Cursor / Claude Code / v0)

“Build a Button component with variants (primary, secondary, ghost, destructive), states (default, hover, disabled, loading with spinner), and renders as <a> when `href` is provided, <button> otherwise.”

Design-gen (Figma Make / Uizard)

“Design a primary button: gradient background, 14px font, 8px vertical / 16px horizontal padding, 8px rounded, subtle shadow, hover state shifts the gradient slightly lighter.”

Input field

Also called: text input, text field, form field

Definition

A single-line text entry field with optional label, placeholder, helper text, and validation message.

Use when

Any form that needs free-text input: name, email, search queries, short-answer fields.

Don't use for

For multi-line input (use <textarea>), constrained choices (use select or radio), or binary options (use toggle or checkbox).

AI-crawler note

No crawler impact beyond accessibility. Use semantic <label> tied to the input via `for` so screen readers and LLMs parsing the page both understand the field.

Prompt templates

Chat-editor (AI site builder)

“Add an email input to the contact form with a placeholder 'you@company.com', required, validated as email format, helper text below.”

Code-gen (Cursor / Claude Code / v0)

“Build an Input component: <label>, <input type="...">, optional helper text, error state with aria-invalid. Use react-hook-form for validation wiring.”

Design-gen (Figma Make / Uizard)

“Design a form input: 12px label above, 14px input with 12px padding, subtle border, 4px rounded. Focus state adds an accent ring. Error state adds a red border and red helper text below.”

Toggle / switch

Also called: switch, on-off, binary toggle

Notifications

Definition

A binary control that flips between two states (usually on and off), styled as a sliding pill.

Use when

Settings, feature flags, anywhere the state takes effect immediately (no separate save step).

Don't use for

For choices that should be grouped with others in a form, use a checkbox instead so the whole form commits together.

AI-crawler note

No crawler impact.

Accessibility: Use role="switch" with aria-checked. A real checkbox styled as a toggle works too.

Prompt templates

Chat-editor (AI site builder)

“Add a dark mode toggle to the header. Saves preference to localStorage.”

Code-gen (Cursor / Claude Code / v0)

“Build a Toggle using Radix Switch. Takes checked/onCheckedChange props. Styled as a sliding pill with gradient fill when on.”

Design-gen (Figma Make / Uizard)

“Design a toggle switch: 36px wide, 20px tall, rounded pill. Off state is a muted background; on state is the accent gradient. 16px thumb circle that slides smoothly.”

Checkbox

Also called: checkbox input, multi-select

Definition

A binary input allowing the user to toggle an item on or off. Used individually for agreements (T&C) or in groups for multi-selection.

Use when

Multi-select lists, agreement acceptance, settings that can be on or off independently.

Don't use for

For binary settings that take effect immediately (use a toggle). For single-select from a group (use radios).

AI-crawler note

No crawler impact.

Accessibility: Use a real <input type="checkbox"> with a <label>. Custom-styled divs lose keyboard handling and screen-reader support.

Prompt templates

Chat-editor (AI site builder)

“Add a 'Services you're interested in' multi-select on the contact form with 6 checkboxes. Required: at least one must be checked.”

Code-gen (Cursor / Claude Code / v0)

“Build a Checkbox component wrapping <input type="checkbox"> with custom styling. Supports disabled, indeterminate, and error states. Uses React Hook Form register pattern.”

Design-gen (Figma Make / Uizard)

“Design a checkbox: 16x16 rounded, accent fill when checked with white check icon, subtle ring on focus. Label to the right, aligned to the top of the checkbox.”

Radio group

Also called: radio buttons, single-select, option group

Definition

A set of options where exactly one can be selected. Visually a circle with a filled dot when active.

Use when

Short lists (2–6) of mutually exclusive choices where seeing all options at once helps the decision.

Don't use for

Long lists (use a select). Binary choices where one option is default (use a toggle).

AI-crawler note

No crawler impact.

Accessibility: Use real <input type="radio"> elements grouped by name attribute. Arrow-key navigation works natively.

Prompt templates

Chat-editor (AI site builder)

“Add a 'Budget range' radio group on the contact form: Under $10K, $10-50K, $50-100K, $100K+.”

Code-gen (Cursor / Claude Code / v0)

“Build a RadioGroup component using Radix RadioGroup primitives. Takes options array {value, label}. Keyboard navigation, aria-checked, form-ready.”

Design-gen (Figma Make / Uizard)

“Design a radio group: 16x16 circles, accent-filled dot when selected, 8px gap between items, labels aligned to the right of the circle.”

Textarea

Also called: multi-line input, long-form field, message field

0 / 500

Definition

A multi-line text input for longer entries: messages, descriptions, notes, comments.

Use when

Any input expected to be more than one line. Messages, feedback, descriptions, questions.

Don't use for

For short single-line inputs (use an Input field).

AI-crawler note

No crawler impact.

Accessibility: Tie to a <label> via for/id. Include a visible character-count or max-length hint for constrained inputs.

Prompt templates

Chat-editor (AI site builder)

“Change the message input on the contact form to a textarea, 4 rows default, auto-grow as the user types, with a character count below.”

Code-gen (Cursor / Claude Code / v0)

“Build a Textarea component wrapping <textarea> with optional auto-resize on input, maxLength with character counter, and error state.”

Design-gen (Figma Make / Uizard)

“Design a textarea: 4 rows minimum, same visual style as text inputs, resize handle in the bottom-right. Character count in the bottom-right below when max-length is set.”

Date picker / calendar

Also called: date input, calendar, date selector

← April 2026 →
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Definition

A calendar popover (or inline calendar) for selecting a single date or date range.

Use when

Any date input. Ranges for booking flows, analytics filters, or scheduling.

Don't use for

For short relative ranges ('Last 7 days'), a preset chip group may be friendlier.

AI-crawler note

No crawler impact.

Accessibility: Native <input type="date"> has strong defaults and keyboard support. Custom pickers must implement full keyboard navigation and ARIA patterns.

Prompt templates

Chat-editor (AI site builder)

“Add a date-range picker to the dashboard filter bar: preset chips (7d, 30d, 90d, Custom). Custom opens a calendar popover.”

Code-gen (Cursor / Claude Code / v0)

“Build a DatePicker using react-day-picker. Support single-date and range modes, keyboard navigation, and preset shortcuts.”

Design-gen (Figma Make / Uizard)

“Design a date-range picker: pill-shaped input showing the selected range, click opens a two-month calendar popover with range-selected days highlighted in accent.”

Slider

Also called: range input, range slider

$5K$75K$200K

Definition

A draggable thumb on a track representing a numeric value or range between a minimum and maximum.

Use when

Numeric input where the range matters more than the exact value: volume, price filter, opacity, date ranges.

Don't use for

When precision matters. A number input is better for exact values.

AI-crawler note

No crawler impact.

Accessibility: Use <input type="range"> or a library with proper role="slider" and aria-valuemin/max/now. Keyboard arrows move by a step.

Prompt templates

Chat-editor (AI site builder)

“Add a budget slider to the pricing calculator: $5K–$200K range, $5K steps, shows current value above the thumb.”

Code-gen (Cursor / Claude Code / v0)

“Build a Slider using Radix Slider primitives. Accept min, max, step, value, onValueChange. Render the current value as a tooltip on the thumb.”

Design-gen (Figma Make / Uizard)

“Design a slider: thin track with filled accent segment up to the thumb, circular thumb with subtle shadow, value label floating above on drag.”

File upload

Also called: file input, drag-and-drop upload, dropzone

↑
Drop files here
or click to browse

Definition

A UI for uploading files, either via a file-picker button or a drag-and-drop target (or both).

Use when

Attaching files to forms, uploading documents, bulk imports. Drag-and-drop is expected for anything more than a single small file.

Don't use for

For text content that could be typed directly. Copy-paste is usually faster than uploading a file.

AI-crawler note

No crawler impact.

Accessibility: Must work with a keyboard (the underlying <input type="file"> handles this). Announce upload progress with aria-live.

Prompt templates

Chat-editor (AI site builder)

“Add a file-upload drop zone to the scoping brief: accepts PDF/DOC/TXT, max 10MB, shows a list of uploaded files with remove buttons.”

Code-gen (Cursor / Claude Code / v0)

“Build a FileUpload component using react-dropzone. Accept array of extensions, max size, multi-file. Show file list with progress, remove, error states.”

Design-gen (Figma Make / Uizard)

“Design a file drop zone: dashed border, cloud-upload icon centered, 'Drop files here or click to upload' text below, subtle background shift when dragging over.”

Form

Also called: multi-field form, compound form

Definition

A compound component of multiple input fields grouped for a single submission: contact forms, sign-ups, checkout, scoping briefs.

Use when

Any time you need structured input from the user. Group related fields, validate on blur, show errors inline.

Don't use for

For single-field interactions (use the input directly). For conversational inputs (use chat).

AI-crawler note

Forms are usually not crawler-relevant content, but the presence of a contact form signals conversion intent to AI which may reference 'Get in touch via /contact' in responses.

Accessibility: Labels for every field, explicit error messages (not just red borders), submit disabled until valid, success confirmation via aria-live.

Prompt templates

Chat-editor (AI site builder)

“Replace the contact form with a 4-step form: Business context, Current state, Desired state, Success criteria. Progress bar at the top, next/back at the bottom, save-as-draft on field blur.”

Code-gen (Cursor / Claude Code / v0)

“Build a Form component using React Hook Form + Zod validation. Multi-step wizard with controlled navigation, draft-save to localStorage, submit handler.”

Design-gen (Figma Make / Uizard)

“Design a multi-step form with a progress indicator (4 numbered dots), one field group per step, validation errors inline below fields, primary CTA at the bottom right.”

Auth form (sign in / sign up)

Also called: login, register, credentials form

Sign in
or

Definition

A specialized form for authentication: email + password, or OAuth buttons, or a magic-link input.

Use when

Any app that gates content behind accounts. Patterns are standardized enough that users recognize them instantly.

Don't use for

As a barrier on content that doesn't need gating. Forcing sign-up before value-delivery is a conversion killer.

AI-crawler note

Sign-in pages are rarely indexed content, but the signal that a site is gated can affect AI recommendations. Make sure there's public-facing content AI can cite even if the core app is behind a login.

Accessibility: autocomplete="email" / "current-password" / "new-password" on the right fields. Visible 'Show password' toggle. Clear error messaging for invalid credentials without leaking which field was wrong.

Prompt templates

Chat-editor (AI site builder)

“Add a sign-in page: email + password, 'Forgot password' link, OAuth buttons for Google and GitHub above the form.”

Code-gen (Cursor / Claude Code / v0)

“Build a SignIn component with email/password fields, OAuth buttons, magic-link fallback. Uses next-auth or similar. Redirect to /dashboard on success.”

Design-gen (Figma Make / Uizard)

“Design a sign-in form: centered card on a subtle gradient background, OAuth buttons on top with a divider, email + password below, forgot password link on the right, primary submit button.”

Icon

Also called: symbol, glyph, pictogram

→
📅
✉
⚙
★

Definition

A small symbolic graphic used to clarify, decorate, or trigger an action. Part of most other components.

Use when

Clarifying buttons, labeling inputs, decorating empty states. Pair with text unless the icon is universally recognized.

Don't use for

As the sole label for a button or link. Icon-only UI is ambiguous and often inaccessible.

AI-crawler note

SVG icons are fine for crawlers as long as they're not the sole content. Important signals should be in text alongside the icon.

Accessibility: Decorative icons: aria-hidden="true". Icons that convey meaning need an accessible label (aria-label or adjacent sr-only text).

Prompt templates

Chat-editor (AI site builder)

“Add Lucide icons to each CTA button matching the action: arrow-right for 'Read more', calendar for 'Book a call', mail for 'Email'.”

Code-gen (Cursor / Claude Code / v0)

“Use lucide-react. Size prop via className (w-4 h-4), stroke-width 2. Wrap aria-hidden when paired with text; aria-label when icon-only.”

Design-gen (Figma Make / Uizard)

“Choose a consistent icon set (Lucide, Phosphor, or Heroicons). 24px default size, 1.5–2px stroke, rounded caps. Don't mix sets.”

Category

Data

How you present tabular or quantitative content.

Table

Also called: data table, grid, spreadsheet view

Feature
Starter
Pro
Enterprise
Users
5
25
Unlimited

Definition

A structured grid of rows and columns displaying tabular data, with optional sorting, filtering, and pagination.

Use when

Any time the data is inherently tabular: comparisons, schedules, records, pricing matrices.

Don't use for

For visual layouts, use grid or flexbox. Using <table> for layout is a twenty-year-old anti-pattern.

AI-crawler note

Real <table>/<thead>/<tbody>/<th>/<td> markup lets LLMs parse the structure and cite values accurately. Tables built with <div>s and CSS Grid are harder for AI to interpret and shouldn't be used for data.

Accessibility: Use <caption> for the table title. Mark row/column headers with <th scope="row|col">.

Prompt templates

Chat-editor (AI site builder)

“Add a pricing-comparison table with three columns (Starter, Pro, Enterprise) and eight feature rows. Include sticky header on scroll.”

Code-gen (Cursor / Claude Code / v0)

“Build a Table component with proper <table><thead><tbody><th scope> markup. Optional sortable columns via aria-sort. Sticky header on vertical scroll.”

Design-gen (Figma Make / Uizard)

“Design a pricing comparison table: three tiers in columns, features in rows, checkmarks in accent green, X marks in muted gray. Sticky header on scroll.”

Pagination

Also called: page controls, pager, numbered nav

‹
1
2
3
…
12
›

Definition

Numbered controls (1, 2, 3, ...) at the bottom of a long list or search results, letting users jump between pages.

Use when

Long lists (blog archives, search results, product catalogs) where infinite scroll would break deep linking or AI crawling.

Don't use for

Short lists (<25 items) — just show them all. Also avoid infinite scroll for content you want indexed.

AI-crawler note

Real anchor-tag pagination (each page has a distinct URL) is crawler-friendly. Infinite scroll almost always hides pages 2+ from AI. If SEO matters, use pagination or a 'Load more' button that also updates the URL.

Prompt templates

Chat-editor (AI site builder)

“Replace the insights infinite scroll with numbered pagination. 12 posts per page. URL updates as the user navigates.”

Code-gen (Cursor / Claude Code / v0)

“Build a Pagination component taking currentPage, totalPages, and a renderLink prop. Use real anchor tags with `rel="prev"` and `rel="next"`. Include aria-label="Pagination" on the <nav>.”

Design-gen (Figma Make / Uizard)

“Design pagination: page numbers as small rounded squares, current page filled with the accent color, prev/next arrows on the ends, ellipsis for skipped pages.”

Stat / metric block

Also called: big number, KPI card, stat card

$400K+
Annual savings

Custom AI ordering system, still running.

Definition

A large-number display with label and optional context sentence, used to communicate a key metric at a glance.

Use when

Case studies, about pages, dashboards, anywhere one number deserves hero treatment.

Don't use for

For multiple related metrics, use a stat grid with several of these side by side.

AI-crawler note

Plain text numbers are crawler-friendly. LLMs cite specific numbers heavily, so make sure the surrounding context (label, source) is in the same HTML block.

Prompt templates

Chat-editor (AI site builder)

“Add a stat block to the case study: $400K+ as the big number, 'annual savings' as the label, one-sentence context below.”

Code-gen (Cursor / Claude Code / v0)

“Build a Stat component: value, label, optional detail. Use large semantic <strong> for the value, <dt>/<dd> for label/value pairing, or <p> if used standalone.”

Design-gen (Figma Make / Uizard)

“Design a stat block: 48px bold number in a gradient accent color, 14px semibold label below, 12px muted context line. Center-aligned.”

Loading skeleton

Also called: skeleton screen, content placeholder, shimmer

Definition

Grey placeholder shapes shown in the layout the content will eventually take, animated with a subtle shimmer to signal loading.

Use when

Async content loads that are fast enough to replace skeletons within a second or two. Better than a centered spinner for most in-layout loads.

Don't use for

For full-page first-paint — ship real static content instead. Skeletons are a client-side pattern; they don't help AI or initial render.

AI-crawler note

Skeletons are client-only and are not seen by AI crawlers. Any content behind a skeleton is invisible to the crawler unless the real content is also in the initial HTML.

Prompt templates

Chat-editor (AI site builder)

“Replace the loading spinner on the dashboard with skeleton cards matching the case-study grid layout.”

Code-gen (Cursor / Claude Code / v0)

“Build a Skeleton primitive: rounded-md bg-slate-200 with an animate-pulse shimmer. Compose into SkeletonCard, SkeletonTable, SkeletonList wrappers.”

Design-gen (Figma Make / Uizard)

“Design loading skeletons matching the real card layout. Light-gray rounded rectangles for title, body, and image areas. Pulse animation at 1.5s.”

Spinner loader

Also called: loader, loading indicator, busy spinner

Definition

A rotating icon indicating that the interface is busy with an action, used when the duration is too short or indeterminate for a progress bar.

Use when

Button loading states, sub-second async actions, initial bootstrapping.

Don't use for

For loads longer than ~2 seconds. A skeleton or progress bar gives a better sense of where you are.

AI-crawler note

Client-only; not visible to crawlers.

Accessibility: Wrap with aria-busy="true" on the container. Announce completion or change to screen readers via aria-live.

Prompt templates

Chat-editor (AI site builder)

“When the submit button is clicked, replace the label with a spinner and disable the button until the request completes.”

Code-gen (Cursor / Claude Code / v0)

“Build a Spinner primitive: SVG circle with animate-spin. Variants for sm/md/lg. Usable inside buttons or full-card overlays.”

Design-gen (Figma Make / Uizard)

“Design a spinner: 16px default, accent gradient stroke, smooth rotation, fades to transparent at one end for a 'trailing' effect.”

File tree

Also called: tree view, nested list, folder browser

▾ docs/
▾ getting-started/
• install.md
• setup.md
▸ guides/
▸ reference/

Definition

A hierarchical expandable list showing folders and files, used in file explorers, docs sites, code editors.

Use when

Browsing nested structures (files, categories, org charts). Persistent navigation in apps like IDEs and docs.

Don't use for

For flat lists. For two-level hierarchies, a sidebar with sub-nav is simpler.

AI-crawler note

File-tree-style docs navigation should render all items in the initial HTML so AI crawlers can traverse the full hierarchy. Lazy-loading subfolders hides interior pages from crawlers.

Accessibility: Use role="tree" with role="treeitem" children. Arrow-key navigation: Right to expand, Left to collapse, Up/Down to move.

Prompt templates

Chat-editor (AI site builder)

“Add a collapsible file tree to the docs sidebar: top-level categories expand to reveal their articles. Active article highlighted.”

Code-gen (Cursor / Claude Code / v0)

“Build a FileTree component from a nested data structure. Use details/summary for native expand/collapse OR Radix TreeView. All items in initial DOM.”

Design-gen (Figma Make / Uizard)

“Design a file tree: 4px indent per level, chevron icon on folders (rotates 90° when open), file icons for leaves, active item highlighted with accent background.”

Category

Feedback

How the interface talks back. Mostly transient; mostly invisible to crawlers.

Tooltip

Also called: hover hint, help tip, micro help

TCO
i
Total cost of ownership

Definition

A small popover that appears on hover or focus, explaining an icon, abbreviation, or control.

Use when

Clarifying icons, short definitions, inline help. Keep the content to one line.

Don't use for

For essential information. Tooltips are invisible on touch devices (no hover), and their content is rarely crawled.

AI-crawler note

Tooltip content is often client-rendered on hover and invisible to AI crawlers. Don't rely on tooltips for content that should be indexed.

Accessibility: Attach to the trigger via aria-describedby. Show on focus as well as hover. Dismiss on ESC.

Prompt templates

Chat-editor (AI site builder)

“Add a tooltip to the (i) icon next to 'Total Cost of Ownership' explaining it includes setup plus 3 years of ongoing costs.”

Code-gen (Cursor / Claude Code / v0)

“Build a Tooltip using Radix primitives. Show on hover + focus, dismiss on ESC, delay 300ms. Position with Floating UI to avoid viewport collisions.”

Design-gen (Figma Make / Uizard)

“Design a tooltip: dark slate background, 11px white text, small tail pointing at the trigger, 250px max width.”

Toast

Also called: snackbar, notification, popup alert

✓
Saved
Your changes were saved.

Definition

A small, temporary notification that slides in from a corner, auto-dismisses after a few seconds, and doesn't block the UI.

Use when

Action confirmations ('Saved'), transient notifications ('New message'), non-blocking errors.

Don't use for

Critical errors or actions requiring a response. Use a modal or inline message instead.

AI-crawler note

Client-side only; not a crawler concern.

Accessibility: Toasts should use aria-live="polite" (or assertive for errors) so screen readers announce them. Give users enough time to read before auto-dismiss (or pause on hover/focus).

Prompt templates

Chat-editor (AI site builder)

“After saving the contact form, show a green success toast in the bottom-right: 'Message sent. I'll reply within 24h.' Auto-dismiss after 5 seconds.”

Code-gen (Cursor / Claude Code / v0)

“Use a toast library like sonner. Configure position bottom-right, dismiss after 5s, pause-on-hover. Wire to form submit success handler.”

Design-gen (Figma Make / Uizard)

“Design a success toast: green accent bar on the left, bold headline, muted body, close X on the right, 320px wide, drop shadow.”

Alert banner

Also called: notification banner, announcement, callout

!
Limited availability: 2 engagement slots open for Q3.

Definition

A horizontal bar at the top (or within a page) carrying a system message: outage, announcement, warning, success.

Use when

Site-wide announcements, in-page validation, system status. Persist until dismissed or the underlying state changes.

Don't use for

Transient confirmations — use a toast.

AI-crawler note

Banner content is crawlable if server-rendered. A dismissible banner that renders client-only after load is invisible to AI.

Prompt templates

Chat-editor (AI site builder)

“Add a warning banner above the hero: 'Limited availability: 2 engagement slots open for Q3.' Dismissible, remembers dismissal in localStorage.”

Code-gen (Cursor / Claude Code / v0)

“Build an AlertBanner with variants (info, warning, success, error). Server-render by default. Persist dismissal to localStorage with a version key so new announcements re-appear.”

Design-gen (Figma Make / Uizard)

“Design alert banners in four variants: info (blue tint), warning (amber), success (green), error (red). Left-side icon, bold headline, body text, optional close X on right.”

Progress indicator

Also called: progress bar, step indicator, completion bar

1
2
3

Definition

A visual showing completion of a task or process: either a determinate bar (0–100%) or a multi-step indicator (Step 2 of 5).

Use when

Multi-step forms, file uploads, onboarding flows, anywhere the user needs to see how far along they are.

Don't use for

For short single-step actions. A simple loading state is enough.

AI-crawler note

No crawler impact.

Accessibility: Use role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax for determinate bars. For step indicators, use <ol> with aria-current="step" on the active step.

Prompt templates

Chat-editor (AI site builder)

“Add a 3-step progress indicator to the scoping-brief form: Business Context → Current State → Desired State. Highlight the current step.”

Code-gen (Cursor / Claude Code / v0)

“Build a Progress component with variants (bar, stepped). Use role="progressbar" with correct ARIA values. Animate transitions smoothly.”

Design-gen (Figma Make / Uizard)

“Design a stepped progress indicator: numbered circles connected by lines. Completed steps filled with accent gradient, current step highlighted with a ring, future steps muted.”

Popover

Also called: flyout, floating panel

🔔
Notifications
3 new updates

Definition

A small floating panel that opens on click or hover and contains more content than a tooltip but less than a modal. Persists until dismissed.

Use when

Contextual helpers, color pickers, date pickers, quick actions, settings panels attached to a trigger.

Don't use for

For focused tasks that block the rest of the UI (use a modal). For single-line hints (use a tooltip).

AI-crawler note

Popover content is client-rendered on open and invisible to crawlers. Don't use popovers for primary content.

Accessibility: role="dialog" with aria-modal="false" (popovers are non-modal). Return focus to the trigger on close. ESC to dismiss.

Prompt templates

Chat-editor (AI site builder)

“Add a popover triggered by clicking the notification bell icon: shows the three most recent notifications with a 'See all' link at the bottom.”

Code-gen (Cursor / Claude Code / v0)

“Build a Popover using Radix Popover primitives. Position with Floating UI to avoid viewport collisions. ESC + click-outside-to-close. Return focus on close.”

Design-gen (Figma Make / Uizard)

“Design a popover: 280px default width, white background, subtle shadow, 8px rounded, small arrow pointing at the trigger. Dark-theme variant matching the nav.”

Notification

Also called: inbox item, alert feed entry

●
New build request
●
Weekly report ready

Definition

A persistent item in a notifications list or panel, showing an event, mention, or update with a timestamp and optional action.

Use when

Apps with ongoing activity that users return to review: mentions, comments, system events, requests.

Don't use for

For transient success/error messages (use a toast).

AI-crawler note

Client-only; not a crawler concern.

Accessibility: Unread notifications should be distinguishable by more than color alone (bold, dot indicator, icon).

Prompt templates

Chat-editor (AI site builder)

“Build out the notifications page: list of notifications grouped by 'Today' and 'Earlier', unread shown in bold with a dot, action buttons per type.”

Code-gen (Cursor / Claude Code / v0)

“Build a Notification component: icon, title, body, timestamp, optional action buttons, read/unread state. Use for a notifications center.”

Design-gen (Figma Make / Uizard)

“Design a notification list item: 16px avatar or icon, 14px title, 12px body, relative timestamp on the right ('2h ago'), unread dot indicator.”

Badge

Also called: pill, chip, label

LivePausedDraftNew

Definition

A small rounded label holding a status, count, or category. Visual shorthand that sits inline with other content.

Use when

Status indicators (Active, Paused, Draft), counts on tabs or notification bells, category tags on cards.

Don't use for

For interactive elements (use a button). For long-form labels (use a standard text label).

AI-crawler note

Badge text is usually short and visible to crawlers as normal text.

Prompt templates

Chat-editor (AI site builder)

“Add status badges to each case study: 'Live', 'Paused', 'Archived'. Color-coded: green, amber, gray.”

Code-gen (Cursor / Claude Code / v0)

“Build a Badge component with variants (default, success, warning, error, info) and sizes (sm, md). Rounded-full pill shape.”

Design-gen (Figma Make / Uizard)

“Design badges: 10px text, 4-8px horizontal padding, rounded-full, tinted backgrounds matching the variant (green for success, amber for warning, etc.).”

Tag

Also called: keyword tag, filter chip, removable chip

ai-automationpromptingweb-development

Definition

A small labeled element representing a filter, keyword, or attached metadata. Often removable (X icon) or interactive (click to filter).

Use when

Tagging content, active filters above a results list, categorizing posts, applied search facets.

Don't use for

For read-only status indicators (use a badge). For structured data selection (use checkboxes or a multi-select).

AI-crawler note

Tag names are short text; crawler-visible. Paired with links, tags become an internal-navigation surface (e.g., /insights/tag/ai-automation).

Prompt templates

Chat-editor (AI site builder)

“Add removable filter tags above the insights list. Clicking the X removes the tag and re-filters. 'Clear all' button when multiple are active.”

Code-gen (Cursor / Claude Code / v0)

“Build a Tag component with an optional onRemove callback. Rounded pill, small X icon on the right when removable, click anywhere to trigger the main action.”

Design-gen (Figma Make / Uizard)

“Design filter tags: 11px text, accent-tinted background, subtle border, 12px X icon on the right with hover state. Gap of 6px between tags.”

Avatar

Also called: profile picture, user image, initials circle

RB
SK
MT
AB

Definition

A circular image or initials representing a user, team member, or author.

Use when

Bylines, author blocks, user menus, comments, presence indicators, testimonial attribution.

Don't use for

As the sole way to identify someone. Pair with a name label unless the context makes identity obvious.

AI-crawler note

Avatars are images; alt text should name the person. Structured data (author schema) is more useful for AI identification than alt text alone.

Accessibility: Decorative avatars alongside names: alt="". Standalone avatars: alt="[Name]".

Prompt templates

Chat-editor (AI site builder)

“Add an avatar to each testimonial: 40px circle, user photo if provided, otherwise initials on a gradient background.”

Code-gen (Cursor / Claude Code / v0)

“Build an Avatar component: takes name + optional image src. Fall back to initials on a deterministic gradient derived from a hash of the name.”

Design-gen (Figma Make / Uizard)

“Design an avatar system: 24/32/40/56px sizes. Image fills the circle; fallback is 2-letter initials centered on a subtle brand-color gradient unique per user.”

Building something and stuck on a component?

I add to this library as clients hit new components. If you're mid-build and can't find the component you need or can't get the prompt to land, I can help. I build AI-native websites for a living and brief this exact vocabulary at clients every week.

See the web-design serviceRead the article