Production-ready UI blocks for landing pages, dashboards, and web apps.
Header with eyebrow, big heading and outline CTA above a five-card bento grid with a tall lead cell, lucide icons, titles and descriptions.
A coming-soon bento grid with a large panel holding a wordmark, a monospace parenthetical eyebrow, a heading and a working email notify form, an image tile, and a dark social-proof tile with an avatar stack and waitlist count.
Asymmetric bento box layout with large hero, gradient stat cards, and image tiles in a visually striking grid.
Coming soon section with a bento-grid of live build stats like commits, test coverage, uptime, and team size. Perfect for building in public with transparent engineering metrics.
A four-step process on one horizontal line that draws itself across the page as the steps arrive in turn, each with a ringed icon, a numeral, a serif title and a description, under a serif heading that settles in word by word beside the intro and a pill action.
Footer led by a full-width oversized wordmark, then a newsletter field with an arrow submit and socials beside four titled link columns, closed by a quiet copyright line.
Single massive statistic as the visual centerpiece with supporting text and action buttons. Perfect for impact-driven conversion sections.
A metrics band with an eyebrow over a hairline rule, a two-column heading, and four oversized light stats, each sitting under its own hairline with a label and caption.
Onboarding screen for choosing a billing cycle (monthly/yearly) with savings badge, payment method selection, and optional coupon code input. Perfect for SaaS apps that collect payment during onboarding.
A split section with an eyebrow, light heading, checked bullet list, and accent button on the left, and two stacked image tiles floating live billing micro-assets on the right.
Three-tier pricing table with monthly/yearly billing toggle and popular plan badge. Perfect for SaaS products with tiered subscription plans.
Three plans with a monthly/yearly billing toggle and feature lists.
Question with blurred answer that unblurs on hover. Interactive approach for answers that unfold visually.
An editorial concert hero built around a band of the bokeh-gradient background component: an oversized headline above, then a full-width strip of out-of-focus city lights that opens from a hairline like a letterbox, drifting in depth and shifting with parallax toward the cursor, then an intro beside an Arrow Pill and an underline link below. The lights live only in the band, so the copy sits on the calm page background. Every bokeh setting passes through the bokeh prop.
Post-booking success screen with animated check icon, confirmation number, booking summary (service, date/time, location, total), scannable QR code ticket, action buttons (calendar, receipt, directions), and email confirmation note.
A confirmation screen with an accent eyebrow, a two-column hairline table of the appointment details, a checked list of what to bring, and a sticky tile floating the live phone view the member also receives.
A split booking dashboard: a left panel with a top nav, functional tab bar, a Manage menu, a bento of revenue/occupancy/metric tiles and an image, toggleable active-booking cards, and a room-availability timeline; a right rail with a real month calendar (selectable days, booked-day dots) and a time-slotted day agenda.
Grid of book cards displaying cover images, titles, authors, star ratings, and category badges. Perfect for sharing reading lists and book recommendations on personal sites.
Book review with cover image, publication details, rating, and pros/cons. Perfect for literary reviews and reading recommendations.
Detailed book review with author bio, ratings, and purchase links. Perfect for literary reviews and book recommendations.
3-column grid with border dividers between items, layout adapts to content. Great for core features grid, capabilities overview, or service sections.
Vertically stacked bordered sections with alternating content and a final call-to-action. Perfect for storytelling-driven conversion.
Bottom-aligned fullscreen hero with inset background media and right-side quick link cards
Fullscreen bottom-aligned hero with vertical stack cards and inset background video with gradient overlay
Contained 16:9 hero carousel with badge, title, description, and CTA over an image background. Auto-rotates with centered, clickable dots at the bottom — same carousel engine as hero19 but not full-height.
Contained 16:9 hero carousel with badge, title, description, and CTA. Vertically centered content that anchors to the left, center, or right via the contentAlign prop. Auto-rotates with centered, clickable dots.
A workflow that states one trigger on an inverted full-width panel, then forks into two equally weighted condition branches whose outcomes sit in nested cards carrying the share of cases they account for.
A contact section that asks a branching set of questions instead of one long form: a rail lists the steps that currently apply and lets you jump between them, and answering the first question adds or removes the steps below it.
A four-column footer with a wide brand column carrying a parenthetical eyebrow, an oversized wordmark, a two-line tagline and labelled social links, beside three ruled link columns with an inline mail address and a centered copyright bar.
Centered eyebrow, heading, and description above a grid of borderless brand cards — each with a square, colorable logo plate, a title and short description, and a full-width animated seal detail button.
Two-row navbar with main navigation and secondary breadcrumb bar for hierarchical content paths. Perfect for e-commerce product pages and documentation with deep category structures.
Animated breaking news ticker with live indicator, category badges, and auto-rotating headlines.
Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities.
Centered hero section with heading, CTA buttons, and a realistic browser chrome mockup displaying product screenshots. Perfect for SaaS landing pages showcasing web app interfaces.
Split layout with stacked stats on the left and a browser window mockup displaying a screenshot on the right.
Centered hero with perspective browser mockup, floating notification cards at corners, and star rating badge. Perfect for SaaS products and web apps.
Questions as clickable pills with answers expanding below. Bubble-shaped buttons for interactive selection.
Budget-based plan selector with slider control that highlights the best matching plan. Perfect for helping users find the right tier.
Customizable pricing with base plan and selectable add-ons that update total dynamically. Perfect for modular products with optional features.
A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.
Bundle breakdown with chunk list showing size, gzip, and module counts. Large chunk warnings, percentage bars, and change indicators for tracking growth.
JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets.
A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer.
A narrow signup where the reader first picks how often they want to hear from you, the paragraph underneath rewriting itself for the choice, before the single email row is filled in.
Event calendar sync with multiple export options including Google Calendar, email invite, and ICS download. Perfect for event reminders and schedule syncing.
Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.
Speaker submission CTA with submission deadline, benefits checklist, and proposal guidelines. Perfect for conferences seeking talk proposals.
Release feed with prominent callout blocks highlighting the most impactful change per release.