Production-ready UI blocks for landing pages, dashboards, and web apps.
A statement heading over a belief list punctuated by intermittent inline thumbnails.
Two-column about section with a sticky eyebrow and big heading on the left and a long belief paragraph above a border-separated values list on the right.
A benchmarking section that pairs an accent bar for the platform median against a muted bar for the sector median on every metric, with a legend above and a sourcing note below.
A working-here section pairing a six-item icon benefits grid and a captioned full-bleed photograph with two closing cards that set what you get against what the company deliberately does not offer.
Categorized studio benefits with checklists per category.
Responsive grid of benefit items with checkmark icons and descriptions. Perfect for benefits list, value proposition, or key advantages.
Studio benefits grid with an accent highlight and icon cards.
A split hero: eyebrow, a serif headline that settles in word by word, an intro, three ringed check benefits and a sliding-marker pill on the left, and a portrait photograph drifting inside its frame on the right.
A bento feature grid with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and four mixed-width image tiles that each float a live product micro-asset above a caption.
Bento layout pairing a code editor mockup with a video play card and a file upload preview. Every label is editable; no media props required.
Bento grid layout with mixed content cards surrounding a central call-to-action. Perfect for showcasing multiple value props in a visually dynamic grid.
Feature cards with 3+2 bento layout and flush media
Asymmetric bento-style grid with a highlighted hero card spanning full width and smaller feature cards below. Great for showcasing a primary feature alongside supporting capabilities.
Bento-style grid with mixed card sizes over background media, featured large card spanning two columns
Asymmetric bento mosaic of project tiles with overlaid titles and hover seal arrows.
Asymmetric bento grid combining a mission card, team photo, stats, and stacked avatars. A modern, compact about section.
Asymmetric bento-style grid with mixed card sizes, color variants, eyebrow labels, and large stat highlights. Perfect for platform overviews, feature showcases, or capability summaries.
Asymmetric bento-style grid with mixed single and double-width stat cards. Ideal for year-in-review and annual report sections.
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.
A left-aligned header with a small eyebrow and a large light heading, two buttons pinned to the right. Below, a bento grid of four sharp-cornered stages alternates wide painted stages with narrower sky gradients, each carrying one live card in a frosted rim: a branch preview coming up, build steps ticking off, a weekly deploy count and a reviewed diff getting approved. An icon, a title and a paragraph sit under each stage.
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.
A viewing request for a development's sales page: eyebrow, heading and lead across the top, then a two-column GET form with a pill-shaped date field that opens a shadcn calendar limited to future days, a row of time-slot pills writing to a hidden input, and name, email and phone fields beside them, closing on a hairline with the submit pill and a note.
A book-direct section for independent hotels: a pinned photograph drifting in its frame with a caption, beside a serif heading and a ruled two-column comparison of what guests get by booking here against elsewhere, with check and dash marks or short values, a sliding-marker pill and a price match note.
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.
An edge-to-edge bar built as a row of cells split by hairline borders: brand, link cells, an empty spacer and a button cell, with no gaps between them. The Services cell drops a full-width row of four bordered cards with a title, a line and an arrow, and the phone menu slides down as a two-column grid of cells. Every panel stays in the markup and is toggled with CSS.
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.