Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 114 ready-made Tailwind CSS 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.
Tailwind CSS
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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
Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.
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.
How you’ll build with Shuffle.
Next.js
Astro
HTML
WordPress
Laravel
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.
