Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 342 ready-made components from the Metis UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Metis
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 minimal white top navigation bar showing the Metis logo mark and wordmark on the left and an outlined Log In button alongside a solid blue Sign Up button on the right. The bar is a compact site header used for brand identification and account entry.
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 three white stat cards showing Followers, Customers, and Projects metrics with large numeric values, monthly period badges, and green or red week-over-week percentage changes. The layout is a simple row of equal-width cards on a light background, suited to dashboard summary metrics.
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 blue hero section with a small pill badge above a bold white two-line heading, a short supporting paragraph, and a single white Get Started call-to-action button, all stacked and centered. It introduces a generic product with a minimal, spacious layout and no imagery.
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 top navigation bar on a white background showing the Metis logo on the left, text links for Shop, About, Blog, and Pricing in the center-left, and a gray 'Let's get in touch' text with a blue 'Contact with us' button on the right. The layout is a single horizontal row with generous spacing between items.
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 sign-in form on a light background with email and password fields, a primary Sign In button, and Facebook and Google social login options. It includes a brand logo above the form and privacy policy and terms links below.
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 team section with a small pill badge, centered two-line heading, and muted intro paragraph above a 4-column grid of circular avatars, names, and blue job titles. It presents company staff for introduction, with no interactive controls visible.
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 section with a small pill badge, a bold two-line heading, and gray supporting text centered above a staggered collage of six architecture photographs of varying sizes. It works as an introductory header followed by an image showcase rather than an interactive gallery.
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 marketing feature section with a bold two-line heading, gray supporting paragraph, and three numbered list items on the left, paired with an illustration of a person beside a desktop monitor on the right. The split layout presents product information alongside decorative artwork.
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 badge, a "Key Features" heading, and three icon-led feature items with supporting text on the left, paired with a rounded photograph of a bearded man reading by a window on the right. Decorative pale blue blocks sit behind the image.
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, split-screen hero section with a bold two-line heading (with blue highlighted words), a short supporting paragraph on the left, and an email input with a blue Sign Up button on the right. Designed to collect email sign-ups with a minimal layout.
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 page showing a blue illustration of a burning car, a blue 'Error 404' heading, a 'Something went wrong!' heading, a short apology line, and two buttons to return home or try again. Layout is a simple vertical stack on a white background with no navigation or footer visible.
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 FAQ section with a blue illustrated panel showing a man at a desk on the left and the heading "Frequently Asked Questions" with four expandable-style question rows and chevron indicators on the right. The layout pairs an illustration with a vertical list of questions.
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-background cookie consent notice with a bold heading, multi-line policy text, and two buttons for accepting or refusing cookies. Content is stacked left-aligned with a filled primary button and an outlined secondary button.
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 contact form with an eyebrow label and large heading, department radio options (Support, Sales), fields for subject, name, email, and message, a captcha-style field, a terms agreement checkbox, and a blue Submit button. The layout is a single vertical stack 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
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
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
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
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
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
Build websites faster with an AI Visual Editor
© 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.
