Production-ready UI blocks for landing pages, dashboards, and web apps.
Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases.
Centered hero with inset background media and overlapping product image
Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media
Full-bleed background-image hero with a legibility scrim and bottom-aligned eyebrow, headline, copy and CTAs.
Ultra-wide cinematic video background with a dark gradient overlay. Content is positioned over the video for an immersive, movie-trailer-style hero section.
Centered grid of 6 icon buttons with circular backgrounds and labels. Perfect for tool navigation, quick action buttons, or feature access menu.
Visual progress tracker featuring a circular percentage indicator with completion stats and task list. Perfect for profile setup flows that encourage users to reach 100% completion.
Full-height username picker with a prefixed input group, a live availability indicator, suggestion chips when a handle is taken, and a submit button that unlocks only when the name is free. Perfect for onboarding handle selection.
Traditional menu with categorized sections, dietary badges (V, VG, GF), and a legend. Perfect for restaurant menus and food ordering pages.
The classic layout in the language: serif wordmark on the left, uppercase letter-spaced links in the middle that underline from the left on hover, a quiet text link and a sliding-marker pill on the right, and a light full-height mobile menu whose links settle in one by one.
Full-screen hero showcasing today's fitness classes with instructor info and available spots. Perfect for gym landing pages and class booking systems.
Minimal design with tags above title and author metadata below. Perfect for technical articles or educational content that prioritizes readability.
A two-column feature section: a vertical list of clickable thread buttons on the left swaps a sticky image panel on the right, with the active item carrying full emphasis and a left border.
Testimonial section driven by a ruled client index: clicking a name swaps the panel beside it, which carries the quote, a round portrait with the attribution, and one ruled outcome figure.
Three testimonials as ruled columns, each led by a grayscale client logo, followed by a large quote and an attribution block that names the person, the role and the project they hired the studio for.
Client logo cloud paired with measurable engagement outcomes.
Long-form testimonials told as stories: a serif heading settling in word by word beside the intro and a pill action, then alternating rows that pair a drifting portrait photograph with a story title, a serif quote, the person, and a link to the full account.
A grayscale grid of bordered client logo cells followed by a strip of three selected-work thumbnails with titles, each linking out.
Animated terminal that types commands character-by-character with output responses. Perfect for showcasing CLI installation steps or quick-start guides.
Large stats that reveal with a horizontal clip-path curtain animation and spring-powered number entrance. Elegant and cinematic.
A closing call to action on a soft panel, pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live agenda micro-asset.
An evening balloon flight hero over the cloud-sky background component: layers of golden-hour cumulus drift past at different depths, lit on the side facing a low sun with a silver lining on thin edges, while the view steers a little with the cursor. A white semibold serif headline, an intro, a light Arrow Pill and an underline link sit in the upper sky. Every sky setting passes through the sky prop.
Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars.
Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.
Browser-chrome card pairing a syntax-highlighted code editor with an AI chat panel — assistant suggestions arrive as inline snippets you can apply with one click. Every label is editable; no media props required.
Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.
Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required.
Developer-focused chat interface with syntax-highlighted code blocks, language badges, copy-to-clipboard buttons, and file name tabs. Optimized for code generation and programming assistance.
Community standards display with principle cards covering respect, inclusion, and safety with issue reporting contact. Perfect for event policies and community guidelines.
Two-column layout with marketing content and a static code snippet display with copy functionality. Perfect for developer tool landing pages or CLI documentation sections.
A retention table that follows each joining cohort across its first year, tinting every cell by how high the figure is and dashing the months that have not happened yet.
Grid of partner cards featuring circular avatars, names, roles, skill badges, and clickable links. Perfect for showcasing team members, collaborators, or professional network.
Split studio hero with a two-tone headline and a four-image arranged collage.
Stacked cards with expandable sections. Use when you need to present multiple questions with full-length answers in a compact, organized format.
Pricing cards with collapsible feature sections that expand on click. Perfect for compact layouts with many features.
A pinned scroll feature section for a furniture and homeware studio built on the scroll-rail component: an eyebrow and heading sit in a fixed header with an underline link to the shop, while a new collection travels sideways beneath it as the page scrolls. Each product rests on its own softly tinted plate like a print on a mat and lifts slightly on hover, with its name, price, a one-line material note and a small add to bag button below. Every third panel is a wider room photograph that drifts inside its frame, with a one-line caption. A thin line under the rail fills with the scroll. Reduced motion turns the rail into a plain horizontal scroll.
Featured collection card with supporting collection tiles, image overlays, and product counts. Perfect for homepage collection highlights.
A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.
Opinion column layout with columnist profile, previous articles list, and editorial styling. Perfect for recurring contributor pieces and thought leadership.
A light footer with the serif wordmark, a tagline and a rounded newsletter field with a sliding-marker pill on the left, three link groups on the right, and a ruled bottom row with the copyright and legal links.
A sticky frosted navbar with two mega items, each dropping a full-width panel of three small-caps link groups in serif type beside a soft featured card with a photograph, an eyebrow and a lifting arrow link. Every panel stays in the markup and is shown with CSS; a light mobile menu groups the same links.
A client wall with the clients withheld. Instead of logos, an oversized ghost-type marquee repeats a coming soon label behind edge fades, under a centered eyebrow, heading and note, with scroll direction and speed as props.
A centered coming-soon launch page with a brand wordmark, a square eyebrow, an accent-highlighted heading, a working email notify form with a success state, a launch note, and a row of social links.