Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 149 ready-made Tailwind CSS components from the Pstls UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Tailwind CSS
Pstls.
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 contact section with a serif "Contact" heading, email, phone, and social links on the left, and a card-style form with name, surname, email, phone, topic, message, file attachment, and a Send Now 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 marketing feature section with a photo of people collaborating at a table on the left overlapping a black panel with a serif heading and a 2x2 grid of icon-led features, each with a title and short body text. The layout is split between image and text content with decorative lavender background accent 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 two-column marketing section with a large serif headline on the left and a black panel on the right listing three numbered steps, each with a colored diamond marker, a serif step title, and short body text. It presents a sequential process rather than an interactive UI.
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 frequently asked questions section with a serif heading, intro text, and a 2-column grid of six white cards each showing a question icon, bold question, and gray placeholder answer text. A centered closing block with an icon, heading, and a lavender 'Get in Touch' button invites further questions.
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 three white stat cards with soft shadows, each showing a small gray label above a large bold serif number (Subscribers, Projects, Tasks). The layout is minimal and spacious, presenting key metrics without charts or 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 testimonial section with a large serif quotation on the left, attribution to Sophie Kowalsky, CTO at Shuffle, and a portrait photo on the right with dot indicators and previous/next arrow buttons. Light background with soft lavender and peach gradient accents.
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 site header with a purple circular logo and wordmark on the left, text navigation links (Home, Products, Resources, Pricing) in the center-left, and a text Log In link beside a solid black Sign Up button on the right. The white background and minimal styling make it a simple, unadorned navigation bar.
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 masonry-style grid of image cards with serif titles and small uppercase category labels, paired with a left vertical filter menu listing categories with count badges. The layout uses a sidebar beside a main content area with a serif heading typography and light pastel background blocks.
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 marketing hero with a large serif headline, short body copy, and App Store and Google Play download badges on the left, paired with a phone mockup showing a VPN app's connection screen on the right. Decorative pastel rectangles sit behind the device for visual depth.
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 team section with a large serif 'Team' heading and intro paragraph above a 3-column grid of six team member cards, each showing a portrait photo, name, and job title. Pastel offset background blocks sit behind the photos for a layered effect.
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 authentication card with a logo, serif heading "Log in to your account," email and password fields, a terms checkbox, a black Sign In button, a Google sign-in button, and a sign-up link. The layout is a vertically stacked form on a faint pastel gradient 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 full-width black band with a small centered caption reading "Trusted by brands all over the world" above a horizontal row of white brand logos including Coca-Cola, Apple, Champion, and Sony. It functions as a social proof section to build trust.
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" comparing two subscription tiers side by side in black cards with feature rows and Buy Now buttons. The left column lists feature labels such as cloud storage, users, teams, commercial rights, and projects, aligned with each plan's values.
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 black testimonial panel displaying a large serif quotation with a lavender quote mark, an attributed name and title, and a row of circular avatars for switching between testimonials. The component sits on a pale gradient background with small pagination dots 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 centered white modal dialog over a dimmed gray overlay, showing a red-outlined circle X icon, a serif heading reading "Some positive notification", body text, and a black "Go back to Homepage" button. The layout is a vertically stacked centered message with a single call to action.
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 site footer with a brand logo and tagline, social icons, three link columns (Product, Resources, Subscribe), and a grey copyright bar at the bottom. The subscribe column includes an email input with a black Send 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 horizontal cookie consent notice with a serif heading, short explanatory text, and two side-by-side buttons for accepting or declining cookies. It uses a light background with a black primary Accept button and a light gray Decline 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 light marketing section with a large serif heading, short intro text, and a photograph on the right, followed by a six-item grid of numbered steps with diamond-shaped number markers, bold serif step titles, and short descriptions. It presents a process overview without any 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 centered authentication card with a serif heading, email and password fields, a terms checkbox, a black Sign In button, and a Google sign-in option. It includes a sign-up link for users without an account.
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 frequently asked questions section with a serif heading, intro paragraph, and a two-column grid of six question items marked by purple question-mark icons. A gradient banner at the bottom invites users to get in touch via a 'Get in Touch' button.
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.
