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 comparison table listing eight example packages against five features, with green check and red cross-circle icons indicating inclusion or exclusion. Rows alternate between light gray and white backgrounds on a white card with a light page 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 centered brand lockup showing a blue rounded-square icon with white abstract mark next to the bold dark wordmark 'Metis' on a plain white background. It has no interactive controls or navigation and functions only as a logo or brand identifier.
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 help center section with an illustrated hero, a central search input, four category cards with bulleted links, and a list of expandable FAQ questions with chevron indicators. The layout is a centered stack with a four-column card row below the search bar and a vertical question list at the bottom.
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 testimonials section with a quote icon, centered heading and subtext, and a two-column grid of eight person cards showing avatar, name, role, and placeholder quote text. A blue "Show more Testimonials" button sits centered below the grid.
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, light-background hero section with a small blue pill badge, a large bold two-line heading, gray supporting text, and a primary filled button paired with a secondary outlined button. The stacked layout and minimal styling make it suited to marketing landing pages.
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 two-line bold heading, a muted subheading, and an inline email input paired with a blue Sign Up button. It is a simple light-background landing section for collecting email addresses.
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 muted supporting text above a mixed-size grid of architectural photographs. The grid combines small square tiles with larger spanning tiles, presenting building images as illustrative content rather than 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 dark rounded banner titled Cookie Policy with a paragraph explaining cookie usage and two action buttons, Accept Cookies (filled blue) and Refuse Cookies (outlined). It functions as a notification-style consent prompt displayed as a contained card.
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 split-layout team section with a pill label, large heading, and supporting paragraph on the left, and a two-column grid of circular avatar photos with names and job titles on the right. The design is light and minimal with generous whitespace and 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 split-screen sign-in page with a left-side form containing email and password fields, a primary Sign In button, and Facebook and Google social login options. The right panel displays a large blue illustration of a person walking a dog beside city buildings, serving as decorative brand 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 light-themed website footer displaying a brand logo with placeholder text, office address and email contact columns, a copyright line, and Facebook, Twitter, and Instagram icons. The content is arranged in a horizontal row with a bottom row for copyright and social links.
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 contact section with a heading and phone, email, and address details on the left, and a form with department radio options, subject, name, email, message fields, a terms checkbox, and a blue Submit button 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 horizontal row of four statistic items, each pairing a blue outlined icon in a light rounded tile with a bold numeric value and a gray label such as Followers, Solved Problems, Happy Customers, and Projects. It presents key metrics in a compact, minimal, light-background 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 two-column marketing section with a large bold heading, body paragraph, and blue Learn More button on the left, and three numbered feature items with headings and short descriptions on the right. Light background with blue accent circles for the numbers.
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 a 404 illustration of a person at a desk with a monitor, followed by the heading 'Whoops!' and 'Something went wrong!', a short apology line, and two buttons to return to the homepage or try again.
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 tall architectural photograph on the left and a "Key Features" heading with three icon-led feature items on the right. Each item has a bold title and gray supporting text, with a small blue pill badge above the heading.
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 blog section titled "Our Blog" showing four alternating rows of post cards, each pairing an abstract fluid-art image with a category tag, heading, excerpt, and Read More link. A centered blue "Show all posts" button closes 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 tabular records component listing projects with columns for project name and icon, budget, status badges, assigned user avatars, and completion progress bars. Rows are separated by thin dividers on a white card with rounded corners.
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 centered heading and three side-by-side plan cards (Beginner, Intermediate, Professional) showing monthly price, feature checklists, and Start Free Trial and Purchase buttons. The middle Intermediate card is highlighted with a dark background to emphasize it.
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 testimonials section with a centered quote icon and heading, followed by a 3-column grid of six cards each showing an avatar, name, role, and body text. A blue 'Show more Testimonials' button sits below the grid.
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.
