Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 365 ready-made components from the Asitrastudio UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
asitrastudio
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 hero section for an architecture branding agency, with a large two-line headline, a short right-aligned agency description, a top navigation bar with a consultation button, and a row of rounded architectural photographs below a divider.
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 hero section for an architecture branding agency, featuring a large centered headline "We create modern architecture" flanked by rounded architectural photographs, a top navigation bar with a outlined consultation button, and a circular rotating-text badge. The layout uses a centered headline stack with decorative image tiles around it and a short right-aligned company description.
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 centered modal dialog titled "Sign up to studio" with Google and Apple social sign-up buttons, an OR divider, and fields for full name, email, and password, followed by a disabled-looking Sign up button and terms text. A close icon sits in the top-right 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 thin light gray horizontal strip showing a breadcrumb trail with 'Homepage' in dark text, a slash separator, and 'Services' in muted gray indicating the current page. It provides minimal wayfinding with no visible interactive controls beyond the 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 light-themed FAQ section with a large 'FAQ' heading and a left-column contact prompt linking to an email address. The right column lists eight questions separated by horizontal rules, each with a circular down-arrow expander icon, indicating collapsible accordion rows.
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 portfolio section headed "Selected projects (21)" with category filter pills (All, Villa, Residance, Apartaments) above a mixed-size grid of rounded architectural rendering cards, each with a tag, title, and location. A "See all projects" text link 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 two-column contact section with a large "Let's talk" heading, introductory copy, phone and email cards, social links, and a trusted-by logo row on the left. The right side holds a white rounded "Contact Us" form with pill-shaped inputs, a dropdown, a message textarea, and a black full-width submit 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 pricing section headed "Premium Membership" with a billed monthly/yearly toggle and three side-by-side plan cards showing price, a CTA button, and checkmarked feature lists. The middle Basic plan card is highlighted with a blue gradient and a filled blue CTA 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 full-width dark footer showing a logo, About and Company link columns with a blue HIRING badge, a newsletter heading with email input and Subscribe button, and a bottom row with copyright, social links (Twitter, Instagram, LinkedIn), and legal 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 careers section with a large heading and outlined button on the left, and a vertical list of job postings on the right, each showing employment type, location, role title, a divider line, and an arrow link. Minimal light background with generous whitespace.
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 hero section with a small eyebrow label, a large two-line headline with the phrase 'friends & family' in gray and underlined, and two side-by-side 'Get consulation' buttons (one filled blue, one outlined). A photo of a smiling woman in glasses and a denim jacket sits on the right, with the content arranged in a split-screen 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 marketing feature section with a light page heading above a dark rounded panel. The left side has a large headline, supporting text, and an outlined consultation button, while the right side shows a stacked dashboard screenshot with charts and contacts.
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 error page displaying 'Error 404' with an error badge, body text, and a 'Back to homepage' outlined button on a white panel, paired with two tall rounded architectural photographs on the right. The layout is spacious and minimal, with a serif-free sans heading and a footer-style caption aligned 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 light promotional hero section with a large left-aligned heading, supporting paragraph, and App Store and Google Play download badges, paired with a tilted phone mockup on the right showing a crypto send-to-friend screen. The layout is a split screen that promotes a mobile app.
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 preview section with a large 'Blog' heading and a 'See our blog' link, showing three article cards in an asymmetric grid. Each card has a photo, a tag pill, a read-time label, and a title.
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 gray hero section with a small eyebrow label, a large two-line headline, supporting text, and an email input paired with a black Sign Up button on the left. A rounded photograph of a man sitting at a café table with a teal mug occupies the right side.
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 gray rounded container displaying a centered testimonial quote with a small pill label, author avatar with name and title, and circular previous and next arrow buttons. The layout is a vertically stacked, centered arrangement suitable for rotating customer or executive quotes.
Choose from 365 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.
