Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 240 ready-made components from the Zospace UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Zospace
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, full-width marketing hero for the Zospace app, featuring a large left-aligned headline, a subheading, and a blue Get started button. Two tilted phone mockups on the right display app screens, and a simple navigation bar sits at the top.
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-themed marketing hero for the Zospace app featuring a large headline, a primary Get started button, and App Store and Google Play badges on the left, with overlapping phone mockups showing app screens 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
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
A pricing section titled "Choose a plan" showing three subscription tiers (Free, Team, Premium) side by side with prices, feature checklists, and call-to-action buttons. The middle Team tier is visually highlighted with a solid blue background and elevated position.
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-themed testimonials section titled "What people say" showing two side-by-side review cards with avatars, quote text, star ratings, and reviewer names with companies. Previous and next circular blue buttons sit below for carousel navigation.
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-themed marketing section titled 'See all features' containing a feature comparison table across five feature columns with text values and check/dash marks, followed by two large statistic callouts with short descriptions. The table uses alternating row shading and has 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 centered FAQ section with a small blue eyebrow line, a large bold "FAQ's" heading, and four stacked white cards each containing a numbered circle, a question, and a downward chevron indicating expandable content. The light lavender background and rounded cards give it a clean, 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 dark-background horizontal row of four equal columns, each showing a circular progress ring with a numeric value, a divider line, a bold label, and short gray body text. The rings use different accent colors (blue, purple, green, magenta) to distinguish categories.
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 horizontal row of four feature items, each with a colored square icon tile, a thin divider, a bold heading, and short body text. The layout is a simple four-column grid used to introduce distinct features.
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 promotional hero section with a large centered-left heading "We're Zospace - Founded in London", a short supporting sentence, a small lightbulb icon, and a "Learn our story" text link with an arrow. A photograph of a smiling woman in sunlit street occupies the right half, with a smaller portrait overlapping the lower-left corner.
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-themed page footer with a brand heading, short text, two call-to-action buttons, three columns of navigation links, a horizontal divider, a copyright line, and circular social media icons. The layout is a multi-column arrangement with a bottom row for legal and social content.
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-themed blog section with an eyebrow label, centered heading, and three staggered article cards, each with a photo, date badge, and title. A blue pill 'See all' button sits 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 marketing feature section with a centered eyebrow label, two-line heading, and subtitle above a split layout. A photo with a blue circular accent sits on the left, while a vertical list of three numbered steps with bold titles, body text, and dividers appears on the right, ending with a Learn more link.
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-themed centered hero section with a small blue eyebrow label, a large bold two-line headline, a muted supporting paragraph, and a filled primary button beside an outlined secondary button. Decorative faint circles and white sparkle shapes sit in the 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-themed contact section with a heading, a dark map with an Office pin, a photo card with a message call-to-action, and stacked cards showing phone, email, and address details. The layout combines a two-column arrangement with a left image-and-form card and right contact info cards.
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 marketing section with a small blue eyebrow label, a bold multi-line heading 'Trusted by brands all over the world', a short subtext line, and a right-side staggered grid of brand logo cards for Spotify, Wework, Slack, Miro, and Dropbox. Designed to build trust through customer logos.
Choose from 240 of ready-made UI components available in Shuffle Editor.
By subscribing to the editor, you get access to all of them.
The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.
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.
