Auth Forms
View Split-screen with visual
Form on one side, brand imagery on the other
251 PROMPTS · 15 CATEGORIES
UI Prompt Library
for Vibe Coders
A curated library of layout prompts for vibe coders. Pick a section, copy the prompt, paste it into your AI tool — and get clean, ready-to-ship Tailwind CSS markup back.
Stats Bars
16 prompts 
Auth Forms
View Centered card sign-up
Minimal boxed form, great for modals too
Auth Forms
View One-time code (OTP)
Six-digit verification input
Auth Forms
View Magic link request
Passwordless email sign-in card
Auth Forms
View Reset password with strength meter
New password form with live requirements
Auth Forms
View Two-factor setup with QR
Pair an authenticator, then save backup codes
Auth Forms
View Workspace SSO gate
Email first, then SSO or password
Auth Forms
View Passkey sign-in with fallback
Biometric prompt first, password as the escape hatch
Auth Forms
View Account chooser
Pick a signed-in identity or add another
Auth Forms
View New device approval
Approve or block a sign-in from another machine
Auth Forms
View Workspace invite acceptance
Join a team from an emailed invitation link
Auth Forms
View Verify email with resend timer
Waiting state with a cooling-off resend button
Auth Forms
View OAuth consent screen
Granting an app access, scope by scope
Auth Forms
View Account locked with recovery
Too many attempts, and the way back in
Auth Forms
View Active sessions manager
Every signed-in device, with a way to end it
Auth Forms
View Guest or account checkout gate
Three ways past the sign-in wall
Auth Forms
View Trial signup with plan summary
Form on the left, what you are getting on the right
Pricing
View Three-tier with highlight
Classic 3 plans, middle one featured
Pricing
View Single plan focus
One bold plan with a monthly/yearly toggle
Pricing
View Comparison table
Feature matrix across plans
Pricing
View Usage-based estimator
Slider that prices metered consumption
Pricing
View Base plan with add-ons
Core price plus optional modules
Pricing
View Credit pack top-up
One-time bundles with volume discounts
Pricing
View Prices in local currency
Region switcher that converts every plan
Pricing
View Per-seat pricing with quantity stepper
Team size drives the monthly total
Pricing
View Change plan with prorated preview
What the upgrade actually costs today
Pricing
View Plan slider with feature reveal
Drag a range to land on the right tier
Pricing
View One-time licence versus subscription
Two purchase models weighed side by side
Pricing
View Enterprise quote request panel
Sales-assisted tier with a short qualifying form
Pricing
View Module bundle builder
Tick the parts you need and watch the total settle
Pricing
View Marketplace take-rate tiers
Commission that falls as volume climbs
Pricing
View Sliding scale supporter pricing
Pay what the project is worth to you
Pricing
View Device plus plan pricing
Hardware up front or spread across the term
Pricing
View Discount programmes panel
Reduced rates for the groups that qualify
Features / Bento
View Bento grid
Asymmetric tiles of varying size
Features / Bento
View Three-column icons
Simple icon + title + text triad
Features / Bento
View Alternating showcase
Text and media rows that flip sides
Features / Bento
View Tabbed feature switcher
CSS-only tabs, no JavaScript needed
Features / Bento
View Grouped capability checklist
Dense four-column feature index
Features / Bento
View Before and after split
The old way beside the new one
Features / Bento
View Scroll-snap feature carousel
Swipeable cards with arrows and dots
Features / Bento
View Integrations directory with filter
Searchable logo grid grouped by purpose
Features / Bento
View Sticky visual with scrolling steps
Panel stays put while the story scrolls past
Features / Bento
View Hover-to-preview feature list
A list on the left swaps the panel on the right
Features / Bento
View Security and compliance panel
Certifications, controls and a link to the trust centre
Features / Bento
View API block with language tabs
Developer-facing feature with switchable snippets
Features / Bento
View Public roadmap columns
Shipped, in progress and under consideration
Features / Bento
View Buy versus build panel
An honest cost comparison against doing it yourself
Features / Bento
View Platform availability matrix
What works on web, mobile, desktop and CLI
Features / Bento
View Accessibility commitments
Conformance, keyboard support and how to report gaps
Features / Bento
View Architecture flow diagram
How data moves, drawn in boxes and arrows
Hero Sections
View Centered headline
Big type, subtext, dual CTAs
Hero Sections
View Split hero with screenshot
Copy left, product image right
Hero Sections
View Gradient spotlight
Dark hero with a radial glow
Hero Sections
View Left-aligned hero with stat strip
Editorial copy over a metric footer
Hero Sections
View Waitlist hero with social proof
Signup form plus overlapping avatars
Hero Sections
View Install command hero
Developer landing with a copyable command
Hero Sections
View Before/after drag hero
Copy beside a draggable comparison panel
Hero Sections
View Search-first hero
A single query field carries the whole page
Hero Sections
View Mobile app hero with phone frame
Copy on the left, a CSS-drawn handset on the right
Hero Sections
View Hero with rotating role
One headline that cycles through audiences
Hero Sections
View Marquee logo hero
Headline over a continuously scrolling customer row
Hero Sections
View Editorial rule hero
Magazine masthead with hairlines and a dateline
Hero Sections
View Booking hero with date fields
Search widget sitting under the headline
Hero Sections
View Event hero with countdown
Date, venue and a ticking clock to the doors
Hero Sections
View Portfolio hero with work strip
Introduction over a row of recent projects
Hero Sections
View Donation hero with amount chips
Cause on the left, giving form on the right
Hero Sections
View Local business hero with hours
Address, opening times and a call button
CTA Banners
View Full-width dark banner
Bold end-of-page call to action
CTA Banners
View Inline newsletter
Text left, email form right
CTA Banners
View Two-path CTA split
Self-serve versus talk-to-sales cards
CTA Banners
View Sticky bottom conversion bar
Persistent offer strip with dismiss
CTA Banners
View Countdown launch banner
Live timer over an early-access signup
CTA Banners
View Exit-intent offer modal
One-shot offer as the visitor leaves
CTA Banners
View Referral link CTA
Copyable invite link with a reward tracker
CTA Banners
View In-app upgrade nudge
Usage meter that makes the limit concrete
CTA Banners
View Trial CTA with reassurance
Big ask, softened by four small promises
CTA Banners
View App download CTA with QR
Desktop visitors get a code, phones get the buttons
CTA Banners
View Community join banner
Live member count and a preview of the chatter
CTA Banners
View Webinar registration strip
Session details and a two-field signup
CTA Banners
View Renewal reminder banner
Contract end date with the two decisions available
CTA Banners
View Free shipping progress bar
How far the basket is from the threshold
CTA Banners
View Gated asset download
A report preview traded for an email address
CTA Banners
View Hiring call-to-action
Open roles listed under a short pitch
Stats Bars
View Four-metric row
Big numbers with labels
Stats Bars
View Stats on dark card
Metric trio inside a panel
Stats Bars
View Metric cards with sparkline bars
KPI tiles with a CSS-only trend chart
Stats Bars
View Goal progress bars
Targets with completion percentages
Stats Bars
View Uptime status strip
Per-service history bars with a live summary
Stats Bars
View Cohort retention heatmap
Shaded grid of weekly retention
Stats Bars
View Count-up metrics on view
Figures that animate the first time they appear
Stats Bars
View Ring gauge trio
Three SVG donuts with a figure in the middle
Stats Bars
View Conversion funnel steps
Tapering bars with drop-off called out
Stats Bars
View Week-over-week delta table
Compact metric table with signed changes
Stats Bars
View Live counter ticker
A number that keeps moving while you watch
Stats Bars
View Leaderboard with rank movement
Positions, scores and which way they moved
Stats Bars
View Benchmark against industry
Your figures next to the median and the top decile
Stats Bars
View Poll results breakdown
Survey answers with counts and a total
Stats Bars
View Sustainability impact panel
Emissions, energy and materials with context lines
Stats Bars
View Milestone counters timeline
Company numbers pinned to the years they happened
Nav Bars
View Sticky top nav
Logo, links, and CTA
Nav Bars
View Nav with mega dropdown
Hover panel of grouped links
Nav Bars
View Floating pill nav
Detached rounded bar over the page
Nav Bars
View App bar with search and tabs
Product header plus section tabs
Nav Bars
View Collapsible sidebar nav
Grouped vertical menu that shrinks to icons
Nav Bars
View Docs bar with version switcher
Breadcrumb, version dropdown, older-release notice
Nav Bars
View Mobile drawer menu
Hamburger that slides a full-height panel in
Nav Bars
View Nav with announcement bar
Dismissible notice sitting above the header
Nav Bars
View Sliding underline tabs
Indicator that animates between sections
Nav Bars
View Workspace switcher nav
App bar with a searchable tenant dropdown
Nav Bars
View Shrink-on-scroll nav
Tall header that compacts once the page moves
Nav Bars
View Shop nav with cart badge
Category row, search and a basket count
Nav Bars
View Breadcrumb page header
Location, title and the actions for this record
Nav Bars
View Bottom tab bar
Mobile app navigation pinned to the bottom edge
Nav Bars
View Nav with currency and language
International storefront controls in the bar
Nav Bars
View Anchor nav with scroll spy
Section links that follow the reader down the page
Testimonials
View Three-card grid
Quote cards with avatar footer
Testimonials
View Featured single quote
One large centered testimonial
Testimonials
View Logo wall + quote
Social proof strip with a highlight
Testimonials
View Masonry quote wall
Uneven columns of varied-length quotes
Testimonials
View Rating summary with reviews
Score breakdown beside recent reviews
Testimonials
View Video story cards
Play-button thumbnails with a pull quote
Testimonials
View Auto-advancing quote slider
One quote at a time with a progress ring of dots
Testimonials
View Case study result card
A quote anchored to the number it produced
Testimonials
View Social post wall
Screenshots of praise, laid out as posts
Testimonials
View Review badges with quote
Third-party ratings framing a single endorsement
Testimonials
View Avatar tab quote switcher
A row of faces selects which story shows
Testimonials
View Scrolling wall of love
Two rows drifting in opposite directions
Testimonials
View Filterable quote grid by industry
Chips narrow the wall to your own sector
Testimonials
View Interview-style testimonial
A conversation, with pull quotes lifted out
Testimonials
View Quote over product screenshot
Endorsement laid across the thing being praised
Testimonials
View Team voices for careers
What the people who work there actually say
Testimonials
View Logo wall with hover quotes
Customer marks that reveal what they said
Footer
View Multi-column footer
Brand + link columns + legal row
Footer
View Minimal centered footer
Logo, inline links, copyright
Footer
View Dark footer with newsletter
Signup panel above the link columns
Footer
View Oversized wordmark footer
Giant brand type with a thin link row
Footer
View Footer with overlapping CTA card
White conversion card sitting on a dark footer
Footer
View Compact app footer bar
Slim in-product strip with status and locale
Footer
View Footer with status and region
Operational badge and locale controls in the base
Footer
View Mega footer with app badges
Six link columns and mobile download blocks
Footer
View Footer with latest updates
Recent posts sit beside the navigation columns
Footer
View Studio contact footer
Address, hours and a direct email in place of links
Footer
View Regulated disclosure footer
Dense small print for financial or medical products
Footer
View Accordion footer for mobile
Link columns that collapse on small screens
Footer
View Docs footer with prev and next
Page navigation, edit link and feedback in one bar
Footer
View Sponsors and partners footer
Tiered supporter logos above the small print
Footer
View Footer with office locations
Three cities with addresses and local contacts
Footer
View Footer with careers highlight
Open roles promoted alongside the navigation
FAQ
View Accordion list
Expandable questions using <details>
FAQ
View Two-column FAQ
Heading left, questions right
FAQ
View Searchable FAQ with filters
Search field, topic pills, results list
FAQ
View FAQ card grid with support tile
Three-up answers plus a contact card
FAQ
View Accordion with helpful votes
Answers that collect feedback as they close
FAQ
View FAQ with category rail
Sticky topic list beside grouped answers
FAQ
View FAQ with copy-link anchors
Each answer has its own shareable URL
FAQ
View Billing FAQ with plan recap
Answers beside a sticky summary of the current plan
FAQ
View Conversational FAQ bubbles
Questions and answers styled as a chat thread
FAQ
View FAQ with expand-all control
Counter and a single switch for every answer
FAQ
View FAQ tabs by audience
Different answers for buyers, admins and developers
FAQ
View Troubleshooting decision tree
One question at a time until the answer appears
FAQ
View Glossary index A to Z
Terms defined, jumpable by first letter
FAQ
View Shipping and returns FAQ
Policy answers with a delivery cost table
FAQ
View FAQ with related articles rail
Answers beside the documentation they point to
FAQ
View FAQ with demo video cards
Short clips answering the visual questions
Dashboards
View Sidebar + stat cards
App shell with metric row
Dashboards
View Data table with toolbar
Searchable list with status chips
Dashboards
View Chart card with legend
CSS-only stacked bars and range picker
Dashboards
View Activity feed panel
Timeline of events with actor avatars
Dashboards
View Kanban board with drag and drop
Four columns, movable cards, live counts
Dashboards
View Inbox split view
Conversation list beside a reading pane
Dashboards
View Analytics overview with range chips
Date range switches every figure on the page
Dashboards
View Usage and billing meters
Every metered resource against its allowance
Dashboards
View Incident board
Live incidents ranked by severity with owners
Dashboards
View Team and roles admin
Member table with inline role controls
Dashboards
View Week schedule grid
Seven columns of time blocks with a now line
Dashboards
View Log viewer with live tail
Streaming lines with severity filters and pause
Dashboards
View Cost explorer by service
Spend split across services with a forecast
Dashboards
View Feature flag rollout panel
Percentage targeting with environment toggles
Dashboards
View Regional performance board
Latency and uptime per region beside a map block
Dashboards
View Approvals queue with detail drawer
List on the left, the selected request on the right
Onboarding
View Stepper progress
Numbered steps with a current state
Onboarding
View Checklist card
Getting-started tasks with progress
Onboarding
View Role picker cards
Selectable tiles that tailor the setup
Onboarding
View Product tour coachmark
Spotlight tooltip anchored to a button
Onboarding
View Invite teammates step
Add addresses, set roles, send or skip
Onboarding
View Connect your stack step
Integration tiles that flip to connected
Onboarding
View Two-step account wizard
Validated fields gate the next button
Onboarding
View CSV column mapping step
Match uploaded headers to expected fields
Onboarding
View Brand your workspace step
Logo, colour and preview side by side
Onboarding
View Goal picker with chips
Multi-select intent that shapes the setup
Onboarding
View Setup complete celebration
Closing screen with the obvious next actions
Onboarding
View Install the CLI step
Copyable commands per operating system
Onboarding
View Notification preferences step
Choosing what reaches you and where
Onboarding
View Sample data or your own
A fork in the road at the start of setup
Onboarding
View Resume onboarding banner
Picking setup back up where it stopped
Onboarding
View Welcome tour modal
A first-run dialog with three things to try
Blog / Content
View Blog card grid
Cover image, tag, title, meta
Blog / Content
View Article prose layout
Readable single-column post body
Blog / Content
View Featured post with side list
One large story plus compact runners-up
Blog / Content
View Filterable post index
Topic pills over a dense row list
Blog / Content
View Article with sticky contents
Reading progress bar and live table of contents
Blog / Content
View Changelog timeline
Release notes down a dated rail
Blog / Content
View Newsletter archive list
Numbered issues with subjects and open rates
Blog / Content
View Author profile with posts
Byline page pairing a bio with recent writing
Blog / Content
View Podcast episode list
Player rows with duration and show notes link
Blog / Content
View Guide library with difficulty tags
Learning content sorted by level and length
Blog / Content
View Article end matter with share rail
What sits under the last paragraph of a post
Blog / Content
View Series navigation for a post
Part three of five, with the whole arc visible
Blog / Content
View Article with margin notes
Sidenotes and footnotes beside the prose
Blog / Content
View Comment thread with replies
Discussion under an article, one level deep
Blog / Content
View Content search results
Matches across posts, docs and videos
Blog / Content
View Case study layout
Client facts in a rail beside the narrative
Contact
View Split contact form
Info panel + form fields
Contact
View Simple support card
Compact centered message form
Contact
View Support channel grid
Route people to the right team
Contact
View Demo booking with time slots
Pick a day, then a slot, then confirm
Contact
View Offices with live local time
City cards that know whether the desk is open
Contact
View Support chat widget
Floating bubble with a canned-reply thread
Contact
View Routed enquiry form
Picking a department rewrites the form around it
Contact
View Feedback rating widget
Score first, then a comment box appears
Contact
View Bug report form
Severity, steps and environment in one submission
Contact
View Request a callback card
Phone number, timezone and a preferred window
Contact
View Press and media contact
Media enquiries beside downloadable brand assets
Contact
View Store locator with results
Postcode search beside a list of nearby shops
Contact
View Department directory table
Who handles what, with a route for each
Contact
View Email preferences page
Unsubscribe options short of leaving entirely
Contact
View Partnership enquiry form
Qualifying questions with a budget range
Contact
View Priority escalation card
The route for something genuinely on fire
Bonus
View Toast notification
Floating success message
Bonus
View Empty state
Friendly no-data placeholder
Bonus
View Cookie consent
Bottom privacy banner
Bonus
View Pricing badge / callout
Small promo strip
Bonus
View Command palette
Spotlight-style ⌘K search overlay
Bonus
View File upload dropzone
Drag area with in-progress file rows
Bonus
View Type-to-confirm delete dialog
Destructive action gated by an exact match
Bonus
View Skeleton loading state
Pulsing placeholders that swap for content
Bonus
View Inline workspace slug editor
Edit, validate, and save a URL without leaving the page
Bonus
View Keyboard shortcut recorder
Capture accessible key combinations and flag conflicts
Bonus
View Selective diff staging
Review and stage individual code hunks
Bonus
View WCAG contrast checker
Test color pairs with live accessibility results
Bonus
View Cron schedule builder
Plain-English controls that emit a cron expression
Bonus
View One-time API key reveal
Shown once, with a countdown and a copy gate
Bonus
View Markdown live preview
Split editor rendering as you type
Bonus
View Timezone overlap planner
Four cities lined up to find a workable hour
Bonus
View Passphrase generator
Word-based secrets with a live strength readout
Bonus
View Regex tester
Pattern, flags and highlighted matches
Bonus
View JSON tree viewer
Collapsible nodes with types and counts
Bonus
View Design token swatch sheet
Palette, spacing and radii with copyable values
Bonus
View Keyboard shortcuts sheet
A searchable cheat sheet in a dialog
Bonus
View Prompt token counter
Live estimate against a model context window
⌕
No prompts found
Try a different search or category.