Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Browse 1,117 ready-made components from the Solstice UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
Solstice
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 footer strip showing the Solstice logo on the left, horizontal navigation links (Platform, Features, How it works, Resources, FAQs) in the center, and grey Twitter, LinkedIn, and Instagram icons on the right, with a centered copyright line below a thin 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 horizontal, rounded cookie consent notice with explanatory text on the left and two actions on the right: an outlined Cookie Settings button and a filled orange Accept All Cookies button. It is a single contained notification bar with 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 horizontal row of three statistic blocks, each with an orange top rule, a large bold numeric value, and a small gray caption beneath. Used to display key metrics such as user counts on a light background with minimal styling.
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 404 'page not found' message centered over a faded grid of placeholder cards, with a short explanatory paragraph and an orange 'Back to Home' call-to-action button. The layout is a centered stack overlaying a four-column grid on 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 split-screen authentication component with a login form on the left, including email and password fields, a forgot password link, an orange Login button, and a Login with Google option. The right half displays a light gray panel with a large white logo mark.
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 support section with a heading and supporting text on the left, a dark maroon incident report call-to-action card below it, and a contact form on the right with name, email, phone, message fields and an orange 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 horizontal top navigation bar showing the Solstice logo, menu links with dropdown indicators for Platform and Resources, plain links for Features and Community, and right-aligned Login and Get Started buttons. The bar uses a light background with a bold orange primary 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
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 with a back link, large centered headline, full-width hero photo, author byline with avatar and tags, multiple body sections, a newsletter subscription callout, and like and comment counters. The layout is a single centered text column beneath the hero image on 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 light-background testimonials section with a centered heading and subtitle above three outlined quote cards, each showing an orange quotation mark, a headline, body text, and a student avatar with name. A centered orange "View more" button sits below the 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
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 headed "Discover our features" with a left-aligned text block promoting a study room product, a Tips callout, and Sign Up Now and Learn more buttons. The right side shows a device-style mockup of a Study Session app screen with a timer and todo checklist over a city skyline 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 light-background pricing section showing a $4/month plan in a large orange card with a sign-up button and feature list, beside a 'A plan for everyone' heading and copy. Below, a two-column Pricing FAQs grid answers common questions about payment and trials.
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 screen-sharing video session where a presenter's shared 3D scene fills the main area, with a study timer and todo checklist overlaid at top left and a participant video tile at bottom right. The layout is a full-width shared-screen stage with floating widgets and a top participant/status 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 light-themed section headed "Join our events" containing a featured event card beside a row of smaller event cards, each showing a photo with decorative colored corner frames, title, date, time, and tag labels. The layout is a grid with one large card spanning the top-left.
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 About Us landing section for a learning company, combining a mission headline with a photo, a four-stat strip (founded, funding, team members, nationalities), a values section with paired images, an investors logo grid, and a team carousel with member cards and a careers call to action. The layout is a stacked sequence of two-column and full-width sections with a light background and orange 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 blog listing page with a large page heading, a featured article card with image and text side by side, category filter pills, and a three-column grid of article cards with thumbnails, titles, excerpts, dates, and tags.
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 FAQ section with a bold FAQ heading on the left and a stack of white collapsible question rows on the right, each marked with an orange plus icon. The left column ends with a support prompt and a dark maroon 'Talk to us' 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 careers landing page for Solstice, combining an intro heading, a photo carousel, a six-card benefits grid with orange icons, a two-card open roles list, and a call-to-action banner for emailing a resume. It is a marketing-style recruiting page rather than an application 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 centered marketing section titled "How it works" with three side-by-side outlined cards, each showing a dark step badge, heading, and short descriptive text. Faint placeholder graphics sit at the bottom of each card, suggesting an onboarding or process explainer.
See what you're getting before you commit. We ship new updates every day.
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.
Ask Codex or Claude in your project, “How can I make the homepage convert better?”, then brainstorm, generate new designs with Shuffle right from your terminal, compare previews and bring the code you like straight into your project. (Read more)
Build websites faster with an AI Visual Editor
© 2026 Shuffle. All rights reserved.
