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 marketing hero section with a top navigation bar, a large serif headline with a lavender accent word, a short paragraph, a black Details button, and a photo of a smiling person on the left. Social links are placed vertically on the left edge and carousel-style pagination dots appear below 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 landing page hero section with a navigation bar, large serif headline "Created for ambitious businesses.", supporting paragraph, black Details button, and a wide architectural photograph below with a 01–06 slide pagination indicator. The layout is a split top row with headline on the left and body text on the right, on a mint-green 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
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
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 promotional hero on a black panel with a small 'NEW FEATURE' eyebrow label, a large serif headline with a lavender highlighted phrase, short supporting text, and two buttons: a filled lavender 'Activate Demo' and an outlined 'Share with friends'. Decorative pale lavender and cream blocks sit behind the panel on a white 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 white cookie consent panel with a serif heading, explanatory body text, a solid black Accept button, and a gray Show more link arranged side by side. It is a compact notification-style component for managing cookie consent.
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 dialog over a gray backdrop showing a teal outlined checkmark icon, a serif heading, body text, and a black button linking back to the homepage. It communicates a success 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 minimal light-background website footer showing a Pstls. logo on the left, four horizontal text links in the center, purple social media icons on the right, and a centered copyright line below. A thin blue rule runs along the bottom edge.
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 error message on a soft white-to-pink gradient background, showing a lavender 'Error 404' label, a large serif heading apologizing that the page cannot be found, and a black button linking back to the homepage. It has no navigation bar, search input, or illustrative 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
A light-themed comparison table with rows of plan features such as team members, users, projects, video chat, real-time collaboration, and support across five columns labeled Feature 1 through Feature 5. Checkmarks and dashes indicate feature availability, with alternating row shading for readability.
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 headed by a large serif title and intro paragraph, followed by three blog article cards arranged in a horizontal grid. Each card shows a colored category tag, serif headline, read time and date, excerpt, and author avatar with name, ending in a centered black "View more articles" 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 long-form blog article page showing a published date, large serif headline, intro paragraph, full-width hero photo, and body sections with an inline image, numbered list, and styled pull quote. The content is centered in a narrow reading column with generous whitespace and a light 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 pricing section titled "Choose a plan" comparing Free, Basic, and Premium subscription tiers side by side, each with a price, feature checklist, and call-to-action button. The center Premium card is emphasized with a black background and purple button, while the outer cards use light lavender backgrounds.
Browse 149 of ready-made components in Tailwind and Pstls library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.
All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.
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.
