Browse 238 ready-made components from the Wrexa UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Wrexa
Full Shuffle Editor access for just $10
Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.
Get 7-Day PassNew to Shuffle? Try our tools:
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 hero section with a photo of two people on the left and a dark panel on the right containing a large heading "Find your editor and create your home." A purple Discover Now button and a floating white product card for the Kirk Oak armchair overlap 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 full-width hero section with a large photograph of two people behind white headline text reading "Find your editor and create your home." A purple promo card on the lower left contains an email input, an Accept button, and a discount code, while a dark header bar with logo and menu toggle sits above.
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 light-themed hero section with a large two-line-plus heading 'Cloud backup solutions for home and business', short supporting text, and a purple 'Learn More' call-to-action button on the left, with floating third-party app logo tiles (Slack, Spotify, Dropbox, Google, and others) arranged on the right. A simple top text link row sits above the hero 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
Two side-by-side white cards listing folders: a personal Files card with three folder links and an All files button, and a Teamwork card with shared folders, avatar collaborators, timestamps, a New dropdown, and Sign in and More Scores buttons. A downward arrow sits below the panels.
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 pricing section headed "Choose the plan that's right for you" with an Annualy/Monthly billing toggle above two side-by-side plan cards showing 12-month and 18-month membership prices in pounds, each with feature checkmarks and a purple Choose 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 helpdesk FAQ section with a numbered label, an expanded question showing a paragraph answer and selectable option rows, followed by collapsed accordion rows with plus icons and footer buttons for all questions and contact. The layout is a vertical stack with a left label column and a right content 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 light-background team showcase section with a large quotation at top and three staggered white cards below, each showing a circular avatar, role label, name, and a teal Learn More link. The cards are offset vertically to create a rhythm across a faint arc-shaped background line.
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 blog feature section labeled "07 Our Blog" with a decorative grid of purple circles (Furniture, Interior Design, Product) on the left and a news-tagged article headline, excerpt, hashtags, and a Learn More button on the right. Split layout pairs a visual motif with editorial text 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 testimonial section showing a customer review from Helen Keller, Head of Design at Miro, with a five-star rating, a large quote, and a smaller review paragraph connected by a vertical timeline line with a chevron control. A faded second review entry appears 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 split-screen contact section with a large "Contact" heading, a subheading inviting text messages, business hours, a hotline number, Messenger and Snapchat handles, and CTA buttons for sending a message or starting live chat. A right-side photo of a woman with a laptop includes overlapping chat-bubble graphics reading "Good morning!" and "Seen".
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 hero section on a dark background with a large two-line-plus heading, short supporting text, a three-item feature list with dot bullets, and a purple call-to-action button. Photographs are arranged in a collage at the left, top right, and right 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 full-width purple hero section displaying a large white heading 'Something has gone wrong.' with a supporting line of text, a back-to-home link, and a purple Homepage call-to-action button. The layout is left-aligned and stacked vertically, with thin rules beneath the heading lines.
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 cookie consent panel with a heading, explanatory paragraph, and two action buttons: a purple filled 'Accept All Cookies' button and an outlined 'Cookies Settings' button. The centered button row sits below left-aligned 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 dark footer section with a 'Have any question?' heading, a Get Started outlined button, five link columns (About, Product, Follow, Application, Support), a legal links row, and a copyright line with a purple logo badge. Its layout is a horizontal set of link columns beneath a promotional header.
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 hero section with a large left-aligned heading, short body text, and a purple Learn More button, paired on the right with a photograph overlaid by a floating app card showing a greeting and an add-avatar widget. The section is labeled with a small numbered 'Introduction' eyebrow and ends with a footer-style row of text 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 marketing section promoting a furniture configurator app, with a bold heading, two feature blurbs with icons, and a purple Download Application button on the left. A phone mockup on the right shows an app screen with a chair product card, color swatches, and sidebar icons.
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 section presenting five lifestyle photographs in a staggered row, with alternating vertical offsets and no visible text or heading. A dashed circular down-arrow below the images suggests a scroll prompt on a white lower background.
Choose from 238 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.
