Add a new CSS class or select an existing one to activate the custom styles menu.
Select any element on the canvas to activate its settings menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt labore et dolore magna. Aliqua ut enim ad minim veniam.
/*** This is a valid CSS file. **/ .your-class {}
compiler.You can use CSS values or Bootstrap variables, just like in .scss files.
We'll show you a Bootstrap variable name and its default value on the label hover. Click on the label to restore input to the default value.
Instead of writing values by hand, you can use pickers specially prepared for colors, sizes, shadows, transitions, and fonts.
Bootstrap Styles menu has two preview modes. One is for your pages (e.g., index.html), and the other is for Bootstrap UI components of the current category.
By default, custom components are saved globally (it is the same object).
If you want to create a new object with its own content, please use save as new component.
By default, only edited code is overwritten.
If you want to create your own component for further reuse, please use save as component.
Please review the code below and decide if you would like to replace the current component code with this version.
...Learn how to prompt AI for the most accurate results.
It will help you generate a complete component structure in the chosen library style (such as v0 by Vercel).
Write a single prompt describing what you need and press Enter. Wait a few seconds, then decide if you want to use the generated code as your custom component in Shuffle (click "save component" to save results).
Note: We do not recommend using this tool to change text that is already written - you can modify it by simply double-clicking in the editor.
We would appreciate your feedback: support@shuffle.dev
Edit global AI Assistant settings. When you use your own API key, you are not bound by Shuffle limits. The saved API keys can be used in other projects.
The scan is in progress.
Select data name, then edit data. Remember to save changes.
There is a newer version or session on the server. Please reload the editor to resolve.
Hint: In 9 cases out of 10 it is caused by opening the same project in multiple browser windows.
Try to use Shuffle Editor on higher resolution or change your device.
You can find previously uploaded files under the Project Files tab.
Use the search input
to browse the Unsplash library.
Select or upload a new SVG icon.
No icons found!
Git integration allows you to configure auto deployments with platforms like Vercel, Netlify, Firebase, and many more.
Create Account
SSH integration allows you to configure auto deployments to any hosting provider.
Create Account
Use the left column to select a category of components. Drag them into the canvas to add them to your project.
After dropping the component on the canvas, you can turn on Drag Mode, move elements around, and add new elements.
Create as many pages as your website needs. Manage them from the dropdown menu.
You can customize the chosen framework here. It doesn't matter if the framework uses Sass, tailwind.config.js, or theme.js. We will show you the same understandable visual interface.
The right menu allows you to modify an element's CSS classes and create new ones when needed.
Shuffle allows you to download the project in HTML, JSX, and PUG formats. Use icons near the Export button to switch formats.
If you don't want to download the project on your disk, export it to the Github repository. This option allows you to configure auto-deployment with platforms like Vercel, Netlify, etc.
Here's a list of keyboard shortcuts that would speed up your workflow.
Save a copy of the current project version in the history. We also save it automatically every few minutes.
Open/Close Components library.
Toggle the drag mode for a component.
When hovering over a component, holding the shift will hide its menu.
Undo the last action.
Redo the last undone action.
Open Change Styles menu.
Open Custom HTML (when hovering on a component).
Move a component UP or DOWN (when hovering on a component).
Change a component to PREVIOUS or NEXT in a library (when hovering on a component).
Delete a component (when hovering on a component).
Change page preview to <number> (when you've created more than one).
Resize the preview window to desktop size.
Resize the preview window to tablet size.
Resize the preview window to mobile size.
Open the preview in a new window.
Export the project.
Close modals.
Try Shuffle supporting tools.
Open Alternatives
UI Library Creator
Try Shuffle Layout
Talk to AI Assistant
Check Shuffle Help Pages .
Grouping classes allows you to reuse the same sets of classes among different elements on your pages.
No grouped classes have been created.
"I've been using Shuffle for a few months now, and I couldn't be happier with its capabilities! It has made designing and building responsive websites much easier and more efficient."
All packages include access to beautiful UI libraries with 13,000+ UI components, Shuffle Editor, and other awesome tools:
Components Gallery,
AI Assistant,
Alternatives,
UI Library Creator,
Randomizer, and more.
Tailwind CSS
Bootstrap
Bulma
Material-UI
If you want to verify the source files first, download the examples.zip file.
Create an account to unlock all customization features and 13,000+ UI components for Tailwind CSS, Bootstrap, and more.
This is a demo mode. If you have an account, please sign in.
Turn ideas into reality with AI Agents—scan or draw mockups, generate HTML, and bring visions to life effortlessly.
Create an account to unlock all customization features and 13,000+ UI components for Tailwind CSS, Bootstrap, and more.