Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 637 ready-made components from the Cronos UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A grid of five photographs showing office workspaces, a person using a smartphone, hands typing on a laptop, a person working by a window, and a group of people standing against a wall. Yellow and dark green square accents overlap the image corners, and the layout is a loose two-row arrangement with no visible text or interactive controls.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-themed section with a centered eyebrow label, bold heading, and intro paragraph above a mixed grid of article cards, each showing a photo, date, title, excerpt, and teal Read more link. The grid uses one wide card and one tall card in the first row followed by three equal cards in the second row.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A light-background contact section with a large bold heading on the left and address and contact details on the right, above a full-width embedded map of New York City. Decorative yellow and dark green blocks frame the map edges.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered hero section with a small 'New feature' badge, a large bold headline, supporting paragraph text, and two side-by-side call-to-action buttons. It promotes a feature or demo with a vertical centered stack on a white background.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A marketing feature section with a decorative photo of a woman working at a laptop on the left, overlaid with colored blocks, and a bold heading with a 2x2 grid of numbered points on the right. Each point has a number badge, a subheading, and placeholder body text.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered marketing hero promoting a mobile app, with a small 'New feature' badge, a bold two-line headline, supporting text, App Store and Google Play download badges, and three overlapping phone mockups displaying nature and sky wallpapers.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A marketing feature section with a yellow badge, large bold heading, and body text on the left, and a two-by-two grid of outlined icons with titles and descriptions on the right. Used to describe product or service features on a light background.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A dark green full-width notice panel with a yellow heading, explanatory cookie policy text, and two buttons for allowing or declining cookies. It is a notification-style consent component placed as a contained block on a white page.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered white card on a dark overlay prompting users to sign up for a newsletter, containing a bold heading, short supporting text, a single email input, and a yellow Sign Up button. The layout is a vertically stacked, minimal form.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A horizontal row of four company logos centered on a light gray panel, used as social proof on a marketing page. Decorative teal and yellow squares frame the corners of the section.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A horizontal row of four statistics, each with a green outline icon, a large bold number, and a small gray label (Projects, Clients, Years of experience, Team Members). It is a simple informational stats section with no interactive controls.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A two-column testimonial section with a framed portrait and decorative colored blocks on the left, and a large quote mark, bold heading, supporting text, and attribution for Danny Bailey, CEO & Founder, on the right. Pagination diamonds below the image suggest a rotating carousel.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A two-column sign-up section with a large bold heading and body copy on the left and a white card on the right containing a 'Create new account' form with email, password fields, a terms checkbox, and a yellow 'Get Started' button. The right card sits over a dark green decorative frame with light accent blocks.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered blog article page header showing breadcrumb navigation (Home, Blog, Article), a bold serif-style heading, an author avatar with name and date, and a full-width green hillside photo with decorative colored squares, followed by body paragraphs in a narrow centered column.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered error state page showing an ERROR 404 badge, a large 'Page not found' heading, supporting text, and two action buttons to return to the homepage or try again. An illustration of two people working with a laptop and code graphic appears on the left, balancing the text block on the right.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A centered section with a small badge label, large heading, and intro paragraph above a two-by-two grid of team member cards. Each card pairs a photo with a green name, bold role title, and gray placeholder bio text.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A marketing feature section with a small pill badge, a bold centered heading and intro paragraph, followed by a 3-column by 2-row grid of feature items. Each item has a green line icon, a bold subheading, and four bulleted text lines on a white background.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A horizontal row of four identical stat items, each showing a green circular progress ring at 65%, a bold label reading Stat Example 1, and gray supporting text. The layout is light-themed and minimal, suitable for displaying key metrics in a marketing or dashboard summary.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A pricing section with a left-aligned heading and body text beside two plan cards, Starter (highlighted in dark green) and Premium (light background). Each card lists features with check icons and a Start Now button for comparing subscription prices.
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Already have an account? Sign in
A full-width cookie consent banner on a dark green background with a heading, explanatory paragraph about cookie use, and Allow and Decline buttons. It presents a consent choice to the user in a horizontal, stacked text layout.
© 2026 Shuffle. All rights reserved.
See what you're getting before you commit.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.