FormPrompt 1
Button
A flexible action primitive with clear hierarchy and complete states.
variantsloading
Prompt Library
See the pattern. Copy the brief.
Visual UI components with concise, stack-agnostic prompts that tell your agent exactly what to build.
84 components
84 components
Visual preview + implementation prompt
FormPrompt 2
Input
A resilient text field for labels, hints, validation, and icons.
validationforms
FormPrompt 3
Textarea
A multi-line field with validation, sizing, and optional character guidance.
multilinevalidation
FormPrompt 4
Label
A compact field label with required and disabled semantics.
formsrequired
FormPrompt 5
Select
A keyboard-friendly option picker that fits native form patterns.
optionskeyboard
FormPrompt 6
Checkbox
A native-feeling checkbox with indeterminate and validation states.
selectionindeterminate
FormPrompt 7
Radio group
A single-choice set with clear grouping and keyboard roving focus.
selectionforms
FormPrompt 8
Switch
A boolean toggle for settings with immediate on/off feedback.
togglesettings
FormPrompt 9
Slider
A continuous or stepped range control for numeric values.
rangeforms
FormPrompt 10
Date picker
A calendar-backed date field with keyboard and locale-aware selection.
calendarforms
FormPrompt 11
Time picker
A precise time field for schedules, bookings, and settings.
timeforms
FormPrompt 12
Combobox
A searchable select for long option lists and async lookups.
autocompletesearch
FormPrompt 13
File upload
A drag-and-drop or browse uploader with clear progress and errors.
filesdrag-drop
FormPrompt 14
OTP input
A segmented verification code field with paste and autofill support.
pinverification
FormPrompt 15
Form field
A label, control, hint, and error wrapper that keeps fields consistent.
fieldsetforms
FormPrompt 16
Search input
A clearable search field tuned for filters, command bars, and lists.
searchclear
OverlayPrompt 17
Dialog
A focused modal surface for decisions, forms, and compact tasks.
modalfocus-trap
OverlayPrompt 18
Popover
An anchored lightweight surface for filters, details, and mini forms.
anchoredoverlay
OverlayPrompt 19
Tooltip
Short hover and focus hints that never steal interaction.
hinthover
OverlayPrompt 20
Dropdown menu
An action menu for overflow, row actions, and compact commands.
menuactions
OverlayPrompt 21
Context menu
A right-click or long-press menu anchored to the pointer.
menupointer
OverlayPrompt 22
Sheet
A side or bottom panel for filters, details, and mobile flows.
drawerpanel
OverlayPrompt 23
Alert dialog
A modal confirmation for destructive or irreversible actions.
confirmdestructive
OverlayPrompt 24
Command palette
A fast ⌘K search surface for navigation and actions.
cmdksearch
OverlayPrompt 25
Modal form
A dialog pattern for create/edit flows with validation and submit states.
dialogforms
NavigationPrompt 26
Tabs
A compact switcher for related views with responsive overflow.
navigationroving-focus
NavigationPrompt 27
Navbar
A responsive header shell with product navigation and actions.
responsivemenu
NavigationPrompt 28
Sidebar
An app-shell side navigation with collapse and nested sections.
app-shellnav
NavigationPrompt 29
Breadcrumb
A hierarchy trail that orients users in deep page structures.
hierarchylinks
NavigationPrompt 30
Pagination
Page controls for lists and tables with compact truncation.
pageslists
NavigationPrompt 31
Link
A styled link primitive that preserves routing and accessibility.
anchorrouting
NavigationPrompt 32
Stepper
A multi-step progress indicator for wizards and onboarding.
wizardsteps
NavigationPrompt 33
Bottom nav
A mobile primary navigation bar with clear active destinations.
mobilenav
NavigationPrompt 34
Segmented control
A compact mutually exclusive control for switching related views.
segmenttoggle-group
NavigationPrompt 35
Mega menu
A multi-column navigation panel for complex site structures.
menumarketing
FeedbackPrompt 36
Toast
Brief, non-blocking feedback for actions and background events.
notificationstatus
FeedbackPrompt 37
Alert
An inline status banner for page or section-level messages.
bannerstatus
FeedbackPrompt 38
Badge
A compact status or count indicator for labels and metadata.
statuscount
FeedbackPrompt 39
Spinner
A lightweight loading indicator for buttons, pages, and inline waits.
loadingpending
FeedbackPrompt 40
Skeleton
Placeholder shapes that reserve space while content loads.
loadingplaceholder
FeedbackPrompt 41
Progress
A determinate progress bar for uploads, imports, and multi-step work.
progressbarloading
FeedbackPrompt 42
Callout
An informational aside for tips, notes, and documentation highlights.
notedocs
FeedbackPrompt 43
Snackbar
A transient bottom notice for undoable actions and light status.
notificationundo
LayoutPrompt 44
Accordion
Progressive disclosure for dense supporting content and FAQs.
disclosurekeyboard
LayoutPrompt 45
Card
A content container for interactive collections and dense groupings.
containerinteractive
LayoutPrompt 46
Separator
A horizontal or vertical rule that divides related content.
dividerprimitive
LayoutPrompt 47
Aspect ratio
A framing helper that locks media to a consistent ratio.
medialayout
LayoutPrompt 48
Scroll area
A contained scroll region with optional styled scrollbars.
overflowscroll
LayoutPrompt 49
Collapsible
A single disclosure region for show-more content.
disclosuretoggle
LayoutPrompt 50
Resizable panels
Split views with draggable gutters for tools and editors.
splitdrag
LayoutPrompt 51
Container
A page-width shell with consistent horizontal padding.
sectionwidth
LayoutPrompt 52
Stack
A spacing helper for vertical or horizontal child sequences.
flexspacing
DataPrompt 53
Empty state
A purposeful zero-state that explains what happened and what to do next.
zero-stateonboarding
DataPrompt 54
Table
A semantic data table with alignment, density, and sticky headers.
tablerows
DataPrompt 55
Data table
A feature-rich table with sort, filter, selection, and pagination.
sortfilter
DataPrompt 56
List
A vertical collection of rows for settings, inboxes, and menus.
listboxrows
DataPrompt 57
Avatar
A user or entity image with initials fallback and sizes.
userimage
DataPrompt 58
Avatar group
A stacked set of avatars with overflow count.
usersstack
DataPrompt 59
Tag
A removable or static label for filters, categories, and metadata.
chipfilter
DataPrompt 60
Stat
A metric display for dashboards with label, value, and delta.
metrickpi
DataPrompt 61
Timeline
A chronological sequence for activity, logistics, and history.
activityhistory
DataPrompt 62
Tree view
A hierarchical list for files, folders, and nested entities.
hierarchyfiles
DataPrompt 63
Kanban
A column board for cards moving across workflow stages.
boarddrag-drop
MediaPrompt 64
Image
A resilient image primitive with sizing, rounding, and fallback.
imgresponsive
MediaPrompt 65
Video player
An accessible video surface with playback controls and captions.
videocontrols
MediaPrompt 66
Carousel
A slideshow for images or cards with restrained motion.
slidergallery
MediaPrompt 67
Lightbox
A full-screen media viewer for zoomed images and galleries.
galleryoverlay
MediaPrompt 68
Icon
A consistent icon wrapper with size tokens and accessibility rules.
svgdecorative
TypographyPrompt 69
Heading
A typed heading scale that preserves semantic level and visual size.
titlescale
TypographyPrompt 70
Text
A body text primitive for size, weight, tone, and truncation.
bodymuted
TypographyPrompt 71
Code
Inline and block code styling for technical content.
monoinline
TypographyPrompt 72
Kbd
A keyboard key glyph for shortcuts and documentation.
shortcutkeys
TypographyPrompt 73
Blockquote
A quoted excerpt style for articles and testimonials.
quoteprose
CommercePrompt 74
Price
A currency display with sale, original, and compact formats.
currencysale
CommercePrompt 75
Cart item
A line item row for cart and checkout with quantity and removal.
checkoutline-item
CommercePrompt 76
Quantity stepper
A compact minus/input/plus control for product quantities.
steppercart
CommercePrompt 77
Product card
A catalog card with media, price, and primary purchase action.
catalogecommerce
AuthPrompt 78
Login form
An email/password sign-in form with validation and error summary.
sign-informs
AuthPrompt 79
Password field
A password input with show/hide toggle and strength guidance.
passwordvisibility
AuthPrompt 80
Social login buttons
Provider sign-in buttons with consistent branding and loading states.
oauthproviders
ChartsPrompt 81
Line chart
A time-series line visualization with tooltip and legend.
charttimeseries
ChartsPrompt 82
Bar chart
A categorical bar chart for comparisons and rankings.
chartcomparison
ChartsPrompt 83
Area chart
A filled time-series chart for volume and cumulative trends.
charttimeseries
ChartsPrompt 84
Donut chart
A part-to-whole circular chart with center total and legend.
chartproportion
FAQ
Good prompts, fewer assumptions.
The library is designed to make AI-generated UI feel native to the product you already have.