Browse 319 ready-made Tailwind CSS components from the Nigodo UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
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
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 marketing feature section with a small section label, a bold centered heading, and intro paragraph above a 3x2 grid of outlined cards. Each card has a pastel blob icon, a title, and short descriptive text describing CRM and business platform capabilities.
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 hero section on a white background with a purple section label, a large bold navy headline, two lines of supporting body text, and a single dark navy Get Started call-to-action button with a subtle offset shadow. The layout is a simple vertically stacked, minimal composition.
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 labeled 'How it works' with a bold heading and a two-column grid of four numbered steps (custom analytics, team management, easy setup, website builder) beside a framed photo of a person typing on a laptop. The layout is split-screen with a light background and navy typography.
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 four outlined cards, each showing a large bold navy figure with a short label beneath, such as project counts, APR, hours saved, and unique users. The cards have rounded corners, navy borders, and a gray drop shadow on a white background, presenting key metrics in a simple, evenly spaced 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 light-background pricing section with a section label, heading, and subheading above three side-by-side plan cards showing price, billing note, feature checklist, and a Get Started button. Each card uses a navy outlined border with a gray offset shadow and a green checkmark list.
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, light-background hero section with a pink section label, a large bold navy headline, a two-line supporting paragraph, and a dark indigo Get Started button. The stacked layout presents a promotional introduction for a small SaaS business.
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 heading reading "Trusted by the top companies in this industry" sits above a horizontal row of four equal outlined cards, each containing a logo for Microsoft, Google, Spotify, and Slack. The section uses social proof to build trust through brand recognition.
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 careers section with a section label, heading, and philosophy text above a vertical stack of five outlined job cards, each showing a role title and a View Job button. The layout is a single-column vertical list with dark navy outlines and offset shadows on white backgrounds.
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 newsletter signup section with a small pink eyebrow label, a bold heading, a supporting line, and an inline email field paired with a dark navy Subscribe button. A short privacy policy note sits beneath the form.
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 text navigation links (Product, Features, Pricing, Resources) on the left, a centered Nigodo logo and wordmark, and Log In and Sign Up actions on the right. The lavender background and dark navy text with a bordered, shadowed Sign Up button distinguish it.
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 with an eyebrow label, large heading, and subheading above an 8-card grid of team members. Each card shows a blob-cropped headshot, name, role, short quote, and social icons, arranged in a 4-column grid with navy outlined 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 news/blog listing section with a centered heading, search input, category tabs, a two-column grid of article cards with images, category tags, metadata, and read-more links, and a Show more button. Cards use dark navy outlines and offset shadows.
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 testimonial section showing a bold quotation from Macauley Herring, CEO & Founder at Nigodo, with a small circular avatar, name and title, and three pagination dots indicating a carousel. Large faded quotation marks decorate the left 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 centered authentication form with a logo, 'Sign in' heading, email and password fields, a remember me checkbox, forgot password link, primary sign-in button, and sign-up link. Uses a light background with a dark navy and teal accent palette.
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 small eyebrow label, a bold two-line heading, and a 2x2 grid of numbered steps covering custom analytics, team management, easy setup, and website building. A photograph of a person typing on a laptop sits in a bordered, offset frame 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
© 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.