Master the Tailwind Builder with this comprehensive tutorial. Learn every feature from drag and drop to code export.
The builder is divided into four main areas designed for an intuitive workflow.
Drop components here
Browse and search through 63 pre-built components organized in 8 categories.
The central workspace where you drag, drop, and arrange your UI components.
Fine-tune every aspect of your selected element with intuitive controls.
Access viewport switching, zoom, undo/redo, and export options.
Follow these steps to create your first component in minutes.
Open the component sidebar on the left and browse through 8 categories with 63+ pre-built components. Use the search bar to quickly find what you need.
Click and drag any component from the sidebar onto the canvas in the center. A drop indicator will show you where the element will be placed.
To arrange elements side by side, first drag a Flex Row, Flex Column, or Grid container, then drop elements inside them.
Click any element to select it, then use the Properties Panel on the right to adjust spacing, colors, typography, and more.
Use the viewport switcher in the toolbar to preview your design on Desktop, Tablet, and Mobile sizes.
Click the Export button to copy JSX/TSX code to your clipboard or download the complete component file.
63 pre-built components across 8 categories, ready to drag and drop.
8 components
10 components
6 components
12 components
10 components
8 components
4 components
5 components
Use these special containers to arrange elements in complex layouts:
Arrange items horizontally
Stack items vertically
Create responsive grids
Fine-tune every aspect of your elements with these property tabs.
Width, height, display, position, flexbox
Margin, padding on all sides
Font size, weight, alignment, line height
Background, text, and border colors
Border width, radius, and style
Shadows, opacity, transforms
Essential tools at your fingertips for a seamless building experience.
Preview your design on different screen sizes.
Zoom in and out of the canvas for precision work.
Show or hide a grid overlay to help with alignment.
Easily revert or reapply changes to your canvas.
Start fresh by clearing all elements from the canvas.
Get your code ready for production.
Interact with elements on the canvas using these actions.
Click any element to select it and view its properties
Hover over elements to reveal the action toolbar
Drag elements to change their position in the layout
Drop elements inside Flex or Grid containers
Create a copy of any element with Ctrl+D
Remove elements with Delete or Backspace key
Toggle code preview with Ctrl+Shift+C
One-click copy for JSX or TSX code
Speed up your workflow with these keyboard shortcuts.
Get the most out of the builder with these helpful tips.
Always add layout containers (Flex Row, Grid) first, then add content inside them for better organization.
Toggle the grid overlay (Ctrl+G) to help align elements precisely and maintain consistent spacing.
Switch between viewport sizes frequently to ensure your design looks great on all devices.
Use Ctrl+D to duplicate elements when you need similar components - then just adjust the properties.
Your canvas is automatically saved every 5 seconds and when you leave the page. Relax and design!
Do not be afraid to experiment! You can always undo changes with Ctrl+Z if something does not look right.
Now that you know the basics, jump in and start creating beautiful UIs!