Blocks

Marketing hero sections with a range of animated backdrops.

A retro LED display-board hero built around an animated dot-matrix screen (comet sweep), with an eyebrow badge, headline, a row of live status chips (uptime VU, circular deploy spinner, latency pulse) and dual call-to-action buttons.

Site headers — a simple navbar, dropdown nav, a mega-menu and a floating pill.

Announcement bars — a slim dismissible top-of-page announcement on the primary surface.

Site footers — a columns layout, a newsletter lead, a centered minimal, a wide mega footer and a CTA-led footer.

An "Industries we serve" section — a centered heading, badge and lead over a responsive grid of industry cards, each with a token-tinted icon, name and one-line value prop.

Bento sections — an editorial mixed-tile grid and a product showcase layout.

Service sections — a grid of icon-chip cards with a highlighted plan and learn-more links.

Feature sections — icon grids, bordered cards, alternating media rows and a bento layout.

Hover-reveal index lists — large rows that swap a preview image on hover or focus.

3D flip-card grids — icon/title fronts that flip to a description, stat and link.

Alternating media-and-content sliders — paired image + text slides stepped by controls and dots.

Pricing sections — from a simple three-tier table to a billing-period toggle, gradient and elevated cards, tinted and horizontal layouts, and a tabbed switcher.

Comparison sections — a two-column us-vs-them layout contrasting your product with the alternative.

An awards and recognition section — eyebrow, heading and lead above a responsive grid of award cards, each with a decorative laurel/trophy icon, award name, awarding organisation and a year badge.

A heading and lead over a responsive grid of case-study cards, each with a category badge, a headline result metric, an excerpt, the client name and an RTL-aware "Read case study" link.

Chat showcase sections — an iMessage-style conversation framed in a phone mockup beside marketing copy.

Social-proof sections — grids, a single hero quote, a masonry wall, marquees and a carousel.

Compact trust bars — avatar stacks, star ratings and headline stats.

Trusted-by logo clouds — a bordered grid, a marquee, an inline-heading row, a spotlight reveal and an animated group cycler.

Shoppable social feeds — a profile header over a grid of post tiles with shop-this overlays.

A two-column security trust section — a reassurance heading, copy and checklist beside a responsive grid of compliance certification cards (SOC 2, GDPR, HIPAA, ISO 27001, CCPA, PCI DSS) with a row of trust stats below.

How-it-works sections — a horizontal step row and a vertical numbered timeline.

Frequently-asked-question sections — an accordion, a two-column split, a static grid and grouped categories.

Integration sections — a card grid, a split layout, a marquee and an orbit diagram.

Long-form prose sections — an article, policy or terms body with headings, lists and a pull-quote.

Product roadmap sections — Now / Next / Later columns of votable feature cards.

Changelog / release-notes sections — a version-rail timeline, a card grid, and a date-rail timeline with per-entry media.

Resource/download lists — file-type rows with title, description, format/size meta and a download link.

Closing call-to-action sections with expressive backgrounds.

A centered waitlist capture — a "Coming soon" badge, heading and lead above an inline POST email form, with an avatar stack and "Join 2,000+ on the list" social proof.

A join-the-community section — an eyebrow badge, heading and lead, a row of total stats, and a responsive grid of channel cards (Discord, GitHub, X, Forum) each with a glyph, name, member count, description and an outbound join button.

Promo countdown bands — a headline with a live days/hours/minutes/seconds timer and CTA.

Team sections — a card grid, a split-lead layout, list rows, a photo grid, a minimal grid and a carousel.

A careers section — a culture blurb with perk badges above open roles grouped by department in divided cards, each row showing department/location/type meta and an Apply button.

Creative-work showcases — a filterable grid of project cards with gradient media and a hover-revealed view action.

About-us sections — a story column with a values list paired with a card collage and a stat grid.

A résumé/CV work-history section: a vertical list of roles, each with the company mark, job title, company, date range and a short summary.

Image galleries — a masonry wall and a uniform grid with a lightbox.

Open Graph social-card templates (1200×630) — minimal, editorial, product, profile, stat, quote and more — token-themed and ready to screenshot in an OG route.

Contact sections — a split info+form, method cards, a map pairing and a compact strip.

Blog sections — a dashed list, card grids, an image grid, a magazine layout and a single-article post header.

A two-column scroll-reveal — a sticky media panel swaps as the reader scrolls numbered content parts, active part emphasised.

Image-and-text content sections — a 50/50 row, a text-over-image band and an editorial overlapping card.

Scroll-pinned storytelling — a sticky text column beside a scrolling media gallery.

Oversized editorial type statements — a large display message with optional emphasis and CTA.

Editorial "about" sections — a media column beside intro copy and a set of collapsible accordion rows.

Link-in-bio layouts — a centered mobile-first column with avatar, bio and a stack of full-width link buttons.

Metric sections — a centered grid of headline numbers and a split layout pairing copy with trend cards.

In-app structural headers and footers — a page header with breadcrumb and tabs, a section header, a table toolbar, and a form action footer.

In-app top navigation bars — brand, primary links, search, notifications and a user avatar menu.

A ranked leaderboard card — a header with a timeframe badge, a top-three podium of sized avatars, and a numbered list of entries showing rank, avatar, name, team badge, score and an up/down movement indicator.

Boarding-pass style flight status card with status badge, origin/destination route, an animated plane gliding the flight path, gate/terminal/boarding/seat details, and a perforated barcode strip.

Dashboard analytics cards — a traffic trend card with a range control, a KPI performance row with sparklines, a sales-by-channel distribution and a weekly-traffic heatmap.

Project overview with status header, progress meter, KPIs, and a task list.

In-app activity feeds — a timeline of events with avatars, action text and timestamps.

Interactive MapLibre maps — analytics overview, logistics network, geographic heatmap and live delivery tracking.

Token-themed chart cards — area, bar, line, scatter, composed, radar, pie, radial, Sankey, histogram, treemap, boxplot, funnel, waterfall, dual-axes, word cloud, Venn, liquid and violin.

Dependency-free relationship diagrams — flow charts, network graphs, org charts, indented trees, mind maps and fishbone cause/effect.

Pre-composed business data tables — recent transactions, CRM deal pipeline and LMS course progress.

Data table with search, role filter, Alpine row selection, and pagination.

Detail panels — key/value information rendered as a semantic description list with a status badge and attachments.

Conversion paywalls — inline plan upgrade, gated article content and a focused subscription card with billing toggle.

An account profile view — a gradient cover band with an overlapping avatar, name/handle/role badge, bio, action buttons and a stat row, then a two-column About details card and recent-activity list.

Account settings screens — a grouped account form, a notification-preferences matrix and a connected-apps integrations list.

Current-plan summary, usage meters, payment method, and invoices table.

Invite form plus a members table with avatars, roles, and status.

Settings layout with sidebar section nav and grouped configuration forms.

Notification center with Alpine filter tabs and unread highlighting.

404 sections — a bold centered layout, a masked oversized numeral, and one with a search field and helpful links.

Empty-state sections — a general first-use prompt and a no-search-results variant.

Multi-step onboarding wizard with an Alpine stepper and per-step forms.

A multi-step form wizard (Account → Profile → Review) with a reactive progress indicator, Back/Continue navigation and a final submit.

AI tool surfaces — text writer, image generator, code generator, an assistant chat, and a model playground, each with live output panels.

Filterable conversation inbox sidebar with presence indicators, unread badges, and active-row highlight.

Card-based radio selection group for choosing an account or workspace, with selection ring and check-circle indicator.

A living design-token reference — colour swatches, type scale, radius, spacing, elevation, motion and numeric tokens plus WCAG contrast grades, all driven by real semantic tokens so the guide re-themes with your app.

A task list card — a completion-progress summary, an add-task input row, and seeded checkbox task rows with priority badges and due dates.

platejs.org-inspired rich-text editors — a full document surface, a compact composer, a commented document and an AI-assisted draft.

Audio players — a spinning vinyl record, a transport-control card, horizontal and vertical Spotify-style cards, and an album crate.

Pick a base brand colour and derive a full semantic palette live — primary, accent, muted and readable foregrounds — with per-swatch copy and a Copy-CSS button.

A grid of preset-theme cards that re-skin a live component preview on click — browse Zinc, Rose, Emerald, Violet, Midnight and more against real UI.

Time and calendar views — a Gantt schedule, a weekly grid and a year overview.

A compact chat panel: a card with an avatar/status header, a sided-bubble conversation and a static composer.

Storefront navigation bars — utility strip, category links, search and wishlist/account/cart actions with a cart count.

Storefront heroes — an editorial collection opener with headline, supporting copy and call-to-action over a dominant product image.

Storefront footers — newsletter signup, multi-column link lists, social icons, locale/currency selector and payment-method chips.

A gradient promotional banner strip — an eyebrow badge, headline, subline, a dashed-border copyable promo-code chip, a primary CTA and an optional dismiss control.

A four-up incentives band — free shipping, 30-day returns, secure checkout and 24/7 support — each with a tokened icon tile, title and subtext, divided on larger screens.

Promotional discount modals — a two-pane dialog pairing a bold offer panel with an email-capture form.

Promotional sale sections — a bold gradient panel with countdown pills, dual CTAs and a discount code.

Age-verification gates — a full-screen dialog confirming legal age before entry.

Gamified discount wheels — an SVG prize wheel with email capture and a spin reveal.

Single-product spotlights — a hero product with media, variant swatches and add-to-cart.

Category pages — a banner with a faceted filter sidebar (categories, price, swatches) and a product grid.

A responsive three-column product comparison — product header cards (price, recommended badge, choose-plan CTA) above an accessible feature-by-feature table with check/cross marks and a highlighted recommended column.

Shop grids — a sort/results toolbar above a responsive grid of product cards with sale badge, rating and add-to-cart.

Quick-view dialog panels — a compact modal-style product card with image, pricing, rating and add-to-cart.

Product-listing page headers — breadcrumb, category title and result count beside sort, view-mode and filter controls.

Storefront filter toolbars — a horizontal bar of filter dropdowns, a view toggle, sort control and active-filter chips.

Shoppable lifestyle imagery — hotspot pins on a photo that reveal product popovers.

Tabbed product grids — accessible tabs that swap between grids of product cards.

Shoppable video-reel rows — tall portrait reel cards with play/mute controls and tagged product popovers.

Product detail (PDP) layouts — an image gallery beside title, rating, price, colour/size selectors and add-to-cart.

Review sections — an average-score summary with a rating-distribution breakdown beside a list of individual customer reviews.

Build-your-own-bundle pickers — selectable products with a running total and unlock-a-discount progress.

Cross-sell upsells — frequently-bought-together bundles with a toggleable, live-totalling checklist.

Sticky add-to-cart bars — a pinned purchase bar with variant, quantity and add-to-cart.

Product-finder quizzes — multi-step recommenders that end on a matched product.

Size guides — a unit-toggle measurements table with a how-to-measure panel.

Ingredient and spec breakdowns — icon-tile ingredient cards with a full-list accordion and trust claims.

Cross-sell strips — a "you may also like" grid of recommended product cards.

Checkout pages — a contact/shipping/payment form beside a sticky order-summary card with promo code and totals.

An account payment-methods card listing saved cards as credit-card previews with a default badge, edit/remove actions, separators and an add-card footer button.

Cart pages — a list of editable line items with quantity steppers beside a sticky order-summary card with a promo field and totals that recompute live.

Order confirmation cards — a success state with line items, totals, shipping address and tracking actions.

Gift-card purchase layouts — a live gradient card preview beside an amount/recipient/message form.

Saved-item wishlists — a card grid and a data-dense table layout.

An account address book — an "Add address" action above a responsive grid of saved-address cards (label badge, recipient, semantic address lines, phone, a default badge and ghost edit/delete actions) plus a dashed add-new placeholder.

An account orders card listing past orders with order number, dated time, a status badge, an overlapping avatar thumbnail stack, a total and view/reorder actions.

Authentication screens — sign in / sign up with split brand panels, testimonial sidebars and patterned backdrops, plus two-factor, password-recovery and email-verification cards.

A centered auth card inviting a user to join an organisation — an org avatar, the inviter and role badge, a separator-divided access list, and accept/decline actions.

Compact weather cards — current conditions, minimalist, extended with high/low, metric tiles, hourly strip, four-day forecast and a wide metrics dashboard.

Live clocks — an analog dial with arabic/roman/no numerals and a multi-city world clock.

Decorative calendar cards — a per-day pricing grid, a week picker with tasks, and a day agenda with accent bars.

Live and final sports cards — football scoreboard, live match, fixtures list, cricket scorecard and commentary, and a basketball period breakdown.

Market cards — a single ticker with an area sparkline, a multi-ticker watchlist, and a price grid.

Player widgets — a circular radial control pad and a now-playing card with a scrollable playlist.

Focus tools — a pomodoro timer, a habit-streak card, a time-allocation ring panel, and a day planner.

System cards — a repository/CI status tile and a storage gauge with a system info table.

Pro document workspaces — upload, viewing, citations, splitting and signing.